/* ============================================================
   PIPELINE & MODELING — Junior Circuit dashboard
   Brand: USA Diving Navy #171f69 / Red #e31937 / Pool #009ac7
   Type: Barlow Condensed (display) + Inter (UI) + JetBrains Mono
   ============================================================ */

/* Chart legends — rendered as wrapping HTML below each SVG chart
   (replaces the old in-SVG single-row legend that overlapped labels) */
.pm-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 16px;margin-top:10px;padding:0 8px}
.pm-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--ink-2,#263248);white-space:nowrap;font-family:var(--f-ui,'Inter',system-ui,sans-serif)}
.pm-legend-line{display:inline-block;width:18px;height:0;flex-shrink:0;vertical-align:middle}
.pm-legend-box{display:inline-block;width:11px;height:11px;border-radius:2px;flex-shrink:0;vertical-align:middle}

/* ── Cohort Progression section ──────────────────────────── */
.pm-cohort-era {
  background: linear-gradient(90deg, rgba(23,31,105,.04) 0%, transparent 100%);
  border-left: 3px solid #171f69;
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--ink-2, #2d3a4a);
  line-height: 1.5;
}
.pm-cohort-era strong { color: #171f69; font-weight: 700; }

.pm-cohort-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #e2e5ef);
}
.pm-cohort-stage-picker {
  display: inline-flex;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 999px;
  padding: 3px;
}
.pm-cohort-stage-btn {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-2, #2d3a4a);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.pm-cohort-stage-btn:hover { color: #171f69; background: rgba(0,154,199,.08); }
.pm-cohort-stage-btn.active {
  background: #171f69;
  color: #fff;
  box-shadow: 0 2px 6px rgba(23,31,105,.25);
}
.pm-cohort-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--ink-2, #2d3a4a);
}
.pm-cohort-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pm-cohort-legend-item .sw {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Cohort lanes — the stacked-bar visualization */
.pm-cohort-lanes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-cohort-lane {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
  padding: 14px 18px 16px;
  transition: box-shadow .15s, transform .15s;
}
.pm-cohort-lane:hover { box-shadow: 0 4px 12px rgba(13,16,64,.08); }
.pm-cohort-lane.starting {
  background: linear-gradient(180deg, rgba(23,31,105,.04) 0%, #fff 100%);
  border-color: rgba(23,31,105,.20);
}
.pm-cohort-lane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.pm-cohort-lane-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pm-cohort-lane-start-tag {
  display: inline-block;
  background: #e31937;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pm-cohort-lane-stage-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #171f69;
}
.pm-cohort-lane-counts { text-align: right; min-width: 0; }
.pm-cohort-lane-big {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #171f69;
  line-height: 1.1;
}
.pm-cohort-lane-big .lbl {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3, #5a6a7e);
  text-transform: none;
}
.pm-cohort-lane-pct {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3, #5a6a7e);
  margin-top: 2px;
}
.pm-cohort-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.pm-cohort-bar {
  display: flex;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  flex-grow: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: width .45s cubic-bezier(.2,.7,.4,1);
  min-width: 4px;
}
.pm-cohort-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: opacity .15s;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
}
.pm-cohort-tier:hover { opacity: .82; }
.pm-cohort-bar-scale {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4, #94a3b8);
  flex-shrink: 0;
  font-weight: 600;
}

.pm-cohort-drop-arrow {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  font-style: italic;
  padding: 6px 0;
  margin: 2px 0;
}

/* Nationals round-by-round breakdown */
.pm-cohort-nat-rounds {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line, #e2e5ef);
}
.pm-cohort-nat-rounds-head {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e31937;
  margin-bottom: 10px;
}
.pm-cohort-nat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media screen and (max-width: 760px) { .pm-cohort-nat-row { grid-template-columns: 1fr; } }
.pm-cohort-nat-cell {
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-2, #f7f8fc);
  border-left: 4px solid var(--line, #e2e5ef);
}
.pm-cohort-nat-cell.final { background: linear-gradient(135deg, rgba(227,25,55,.08) 0%, #fff 100%); border-left-color: #e31937; }
.pm-cohort-nat-cell.semi  { background: linear-gradient(135deg, rgba(0,154,199,.08) 0%, #fff 100%); border-left-color: #009ac7; }
.pm-cohort-nat-cell.prelim{ background: linear-gradient(135deg, rgba(148,163,184,.10) 0%, #fff 100%); border-left-color: #94a3b8; }
.pm-cohort-nat-cell .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3, #5a6a7e);
  font-weight: 700;
  margin-bottom: 4px;
}
.pm-cohort-nat-cell .val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: #171f69;
  line-height: 1;
}
.pm-cohort-nat-cell.final .val { color: #e31937; }
.pm-cohort-nat-cell.semi  .val { color: #009ac7; }
.pm-cohort-nat-cell .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3, #5a6a7e);
  margin-top: 4px;
}

/* ── Rule era chips bar (for Retention Section) ─────────── */
.pm-era-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  align-items: center;
}
.pm-era-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2, #2d3a4a);
  padding: 6px 12px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 999px;
}
.pm-era-chip.post { background: rgba(0,154,199,.08); border-color: rgba(0,154,199,.30); }
.pm-era-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #5a6a7e;
}
.pm-era-dot.post { background: #009ac7; }

/* ── Filter bar ──────────────────────────────────────────── */
.pm-filter-bar {
  background: linear-gradient(180deg, #fff 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 14px 18px 16px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pm-filter-bar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pm-filter-bar-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #171f69;
}
.pm-filter-bar-hint {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  flex: 1;
}
.pm-filter-bar-hint strong { color: #e31937; font-weight: 700; }
.pm-filter-clear {
  background: none;
  border: 1px solid rgba(227,25,55,.30);
  color: #e31937;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.pm-filter-clear:hover { background: #e31937; color: #fff; border-color: #e31937; }
.pm-filter-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-filter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-3, #5a6a7e);
}
.pm-filter-select {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0d1117);
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 8px;
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%235a6a7e" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s;
}
.pm-filter-select:hover { border-color: #009ac7; }
.pm-filter-select:focus { outline: none; border-color: #171f69; box-shadow: 0 0 0 3px rgba(23,31,105,.10); }
.pm-filter-select:not([value=""]):not(:focus) {
  border-color: #171f69;
  background-color: rgba(23,31,105,.04);
  font-weight: 600;
}
.pm-ctl-divider {
  width: 1px;
  height: 28px;
  background: var(--line, #e2e5ef);
  margin: 0 4px;
}

/* ── Demographics section ────────────────────────────────── */
.pm-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media screen and (max-width: 1100px) { .pm-demo-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 760px)  { .pm-demo-grid { grid-template-columns: 1fr; } }

.pm-demo-card {
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 18px 20px;
  --accent: #171f69;
}
.pm-demo-card.wide { grid-column: 1 / -1; }
.pm-demo-card-head { margin-bottom: 14px; }
.pm-demo-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 2px;
}
.pm-demo-card-sub {
  font-size: 11.5px;
  color: var(--ink-3, #5a6a7e);
  line-height: 1.4;
}
.pm-demo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}
.pm-demo-table thead th {
  background: transparent;
  color: var(--ink-3, #5a6a7e);
  font-family: var(--font-ui);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  text-align: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--line, #e2e5ef);
}
.pm-demo-table thead th:first-child { text-align: left; }
.pm-demo-table thead th.pm-demo-total {
  color: #e31937;
}
.pm-demo-table tbody th {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2, #2d3a4a);
  text-align: left;
  padding: 8px 10px;
  background: #fff;
  border-radius: 6px;
  white-space: nowrap;
}
.pm-demo-table tbody td {
  text-align: center;
  padding: 8px 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 600;
  transition: transform .12s;
  cursor: default;
}
.pm-demo-table tbody td:hover { transform: scale(1.04); z-index: 2; position: relative; }
.pm-demo-table tbody td.pm-demo-total {
  background: rgba(227,25,55,.08) !important;
  color: #e31937 !important;
  font-weight: 800;
}

/* Zone breakdown bar list */
.pm-zone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-zone-row {
  display: grid;
  grid-template-columns: 90px 1fr 220px;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  font-size: 12.5px;
}
@media screen and (max-width: 760px) {
  .pm-zone-row { grid-template-columns: 70px 1fr; }
  .pm-zone-trail { grid-column: 1 / -1; padding-left: 84px; }
}
.pm-zone-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #171f69;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pm-zone-bar-stack {
  background: #fff;
  border-radius: 6px;
  height: 26px;
  position: relative;
  border: 1px solid var(--line-2, #f0f2f8);
  overflow: hidden;
}
.pm-zone-bar {
  height: 100%;
  background: linear-gradient(90deg, #009ac7 0%, #171f69 100%);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  min-width: 60px;
  transition: width .4s cubic-bezier(.2,.7,.4,1);
}
.pm-zone-bar-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  white-space: nowrap;
}
.pm-zone-trail {
  font-size: 11.5px;
  color: var(--ink-3, #5a6a7e);
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Layout escape: break out of the regular grid layout ─────
   .app-body is `display: grid; grid-template-columns: var(--side-w) 1fr`
   so even when the sidebar is display:none, the first column is still
   reserved and the dashboard renders in a narrow strip. Override to
   single-column grid AND hide the regular-stage chrome via container. */
body.pm-active .app-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
body.pm-active .control-sidebar { display: none !important; }
body.pm-active .main-workspace {
  min-width: 0;
  width: 100%;
  background: var(--bg);
}

/* The dashboard renders into #pmDashboard (a sibling of the regular
   stage-content children). Show the dashboard when pm-active, hide
   everything else in stage-content. When NOT pm-active, hide the
   dashboard and show the regular children. */
#pmDashboard { display: none; }
body.pm-active #pmDashboard { display: block; }
body.pm-active #stageContent > *:not(#pmDashboard) { display: none !important; }

/* The dashboard root sets its own padding & max width. */
.pm-root {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: 22px 28px 80px;
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  color: var(--ink, #0d1117);
  box-sizing: border-box;
}
@media screen and (max-width: 900px) {
  .pm-root { padding: 14px 14px 60px; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.pm-hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(143,195,234,.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(0,154,199,.22) 0%, transparent 55%),
    linear-gradient(135deg, #171f69 0%, #1e2d8a 55%, #0d1040 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 34px 30px;
  margin-bottom: 22px;
  box-shadow: 0 10px 40px rgba(13,16,64,.25), 0 4px 14px rgba(13,16,64,.18);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  overflow: hidden;
}
.pm-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -8%;
  width: 380px; height: 380px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.pm-hero::after {
  content: '';
  position: absolute;
  top: -20%; right: -2%;
  width: 240px; height: 240px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  pointer-events: none;
}
.pm-hero-inner { position: relative; z-index: 1; min-width: 0; }
.pm-hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(143,195,234,.95);
  margin-bottom: 6px;
}
.pm-hero-title {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pm-hero-sub {
  font-size: 14.5px;
  color: rgba(255,255,255,.86);
  max-width: 720px;
  line-height: 1.55;
}
.pm-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pm-hero-btn {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, transform .1s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pm-hero-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.45);
}
.pm-hero-btn:active { transform: translateY(1px); }
.pm-hero-btn.primary {
  background: #e31937;
  border-color: #e31937;
  box-shadow: 0 4px 14px rgba(227,25,55,.30);
}
.pm-hero-btn.primary:hover { background: #c41530; border-color: #c41530; }
@media screen and (max-width: 800px) {
  .pm-hero { grid-template-columns: 1fr; padding: 22px 22px 24px; }
  .pm-hero-title { font-size: 30px; }
  .pm-hero-actions { justify-content: flex-start; }
}

/* ── Controls bar ─────────────────────────────────────────── */
.pm-controls {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.pm-ctl-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.pm-ctl-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3, #5a6a7e);
}
.pm-year-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  background: var(--surface-2, #f7f8fc);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line, #e2e5ef);
}
.pm-year-pill {
  padding: 7px 15px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-2, #2d3a4a);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  letter-spacing: .02em;
}
.pm-year-pill:hover {
  background: rgba(0,154,199,.10);
  color: #171f69;
}
.pm-year-pill.active {
  background: #171f69;
  color: #fff;
  box-shadow: 0 2px 6px rgba(23,31,105,.25);
}
.pm-year-pill.current::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: #e31937;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.pm-year-pill.active.current::after { background: #fff; }

/* Toggle switches */
.pm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ink-2, #2d3a4a);
  font-weight: 500;
  padding: 4px 0;
}
.pm-toggle-switch {
  width: 38px;
  height: 22px;
  background: #d8dde8;
  border-radius: 999px;
  position: relative;
  transition: background .22s;
  flex-shrink: 0;
}
.pm-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .22s;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.pm-toggle input { display: none; }
.pm-toggle input:checked + .pm-toggle-switch { background: #171f69; }
.pm-toggle input:checked + .pm-toggle-switch::after { transform: translateX(16px); }
.pm-toggle.financial input:checked + .pm-toggle-switch { background: #d97706; }
.pm-toggle-help {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-4, #94a3b8);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
  font-family: var(--font-ui);
  transition: background .15s;
}
.pm-toggle-help:hover { background: #171f69; }

/* ── Section cards ───────────────────────────────────────── */
.pm-section {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
  transition: box-shadow .2s;
}
.pm-section:hover { box-shadow: 0 4px 14px rgba(13,16,64,.08); }
.pm-section-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line-2, #f0f2f8);
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
  position: relative;
}
.pm-section-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, #171f69 0%, #009ac7 100%);
}
.pm-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #171f69;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.pm-section-num {
  display: inline-flex;
  width: 32px; height: 32px;
  background: #171f69;
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.pm-fin-section .pm-section-num { background: #d97706; }
.pm-fin-section .pm-section-title { color: #d97706; }
.pm-fin-section .pm-section-head::before { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); }
.pm-section-explainer {
  font-size: 14px;
  color: var(--ink-2, #2d3a4a);
  line-height: 1.6;
  max-width: 880px;
}
.pm-section-body { padding: 24px 28px 28px; }

/* ── KPI strip ───────────────────────────────────────────── */
.pm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.pm-kpi {
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
  padding: 16px 18px 18px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.pm-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,16,64,.08);
}
.pm-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: #171f69;
}
.pm-kpi.accent::before { background: #e31937; }
.pm-kpi.pool::before { background: #009ac7; }
.pm-kpi.financial::before { background: #d97706; }
.pm-kpi.financial { background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); border-color: #fde68a; }
.pm-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3, #5a6a7e);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.pm-kpi-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: #171f69;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0;
}
.pm-kpi.accent .pm-kpi-value { color: #e31937; }
.pm-kpi.pool .pm-kpi-value { color: #009ac7; }
.pm-kpi.financial .pm-kpi-value { color: #d97706; }
.pm-kpi-sub {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  font-weight: 500;
}

/* ── Funnel viz (Section 1) ──────────────────────────────── */
.pm-funnel-wrap {
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border-radius: 12px;
  padding: 24px 20px;
  border: 1px solid var(--line, #e2e5ef);
}
.pm-funnel-svg {
  width: 100%;
  height: auto;
  display: block;
}
.pm-funnel-stage-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  fill: #171f69;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.pm-funnel-stage-sublabel {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ink-3, #5a6a7e);
}
.pm-funnel-band-count {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  fill: #fff;
  letter-spacing: 0;
}
.pm-funnel-band-count.dark { fill: #171f69; }
.pm-funnel-band-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  fill: rgba(255,255,255,.85);
}
.pm-funnel-band-label.dark { fill: var(--ink-3, #5a6a7e); }
.pm-funnel-attrition {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  fill: var(--ink-3, #5a6a7e);
}
.pm-funnel-financial {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: #d97706;
}
.pm-funnel-financial-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  fill: #b45309;
  opacity: .85;
}

/* Funnel legend */
.pm-funnel-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e2e5ef);
  font-size: 12.5px;
  color: var(--ink-2, #2d3a4a);
}
.pm-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.pm-legend-sw {
  width: 14px; height: 14px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* ── Year-over-year (Section 2) ──────────────────────────── */
.pm-yoy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media screen and (max-width: 1100px) { .pm-yoy-grid { grid-template-columns: 1fr; } }
.pm-yoy-chart {
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 20px;
}
.pm-yoy-chart-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #171f69;
  margin-bottom: 4px;
}
.pm-yoy-chart-sub {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  margin-bottom: 16px;
  line-height: 1.5;
}
.pm-yoy-svg { width: 100%; height: auto; display: block; }

.pm-bar-rect { transition: opacity .15s; cursor: pointer; }
.pm-bar-rect:hover { opacity: .82; }
.pm-bar-label {
  font-family: var(--font-ui);
  font-size: 11px;
  fill: var(--ink-3, #5a6a7e);
  font-weight: 500;
}
.pm-bar-value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  fill: #171f69;
}
.pm-bar-year {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--ink-2, #2d3a4a);
}
.pm-axis-line { stroke: var(--line, #e2e5ef); stroke-width: 1; }
.pm-axis-tick { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-3, #5a6a7e); }
.pm-grid-line { stroke: #eaecf3; stroke-width: 1; stroke-dasharray: 2,3; }

/* ── Financial breakdown ─────────────────────────────────── */
.pm-fin-section {
  background: linear-gradient(180deg, #fffbeb 0%, #fff 25%);
  border-color: #fde68a;
}
.pm-fin-section .pm-section-head {
  background: linear-gradient(180deg, #fef3c7 0%, #fffbeb 100%);
  border-bottom-color: #fde68a;
}

.pm-fee-table-wrap { overflow-x: auto; margin-bottom: 18px; }
.pm-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pm-fee-table th {
  background: #171f69;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 14px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pm-fee-table th.col-current {
  background: #e31937;
  position: relative;
}
.pm-fee-table th:first-child { text-align: left; }
.pm-fee-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e2e5ef);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-2, #2d3a4a);
}
.pm-fee-table td.col-current {
  background: #fffbeb;
  color: #d97706;
  font-weight: 800;
}
.pm-fee-table td:first-child {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink-2, #2d3a4a);
}
.pm-fee-table tr:last-child td { border-bottom: none; }
.pm-fee-table .total-row td {
  background: #f7f8fc;
  font-weight: 800;
  color: #171f69;
  font-size: 14px;
}
.pm-fee-table .total-row td.col-current { background: #fef3c7; color: #d97706; }
.pm-fee-table .new-2026 {
  position: relative;
}
.pm-fee-table .new-2026::after {
  content: 'NEW';
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #e31937;
  background: rgba(227,25,55,.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.pm-fin-cost-hist {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 20px 22px;
}
.pm-fin-hist-head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #171f69;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.pm-fin-hist-sub {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  margin-bottom: 16px;
  line-height: 1.5;
}
.pm-fin-hist-bar {
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line-2, #f0f2f8);
}
.pm-fin-hist-bar:last-of-type { border-bottom: none; }
.pm-fin-hist-label {
  color: var(--ink-2, #2d3a4a);
  font-weight: 600;
  line-height: 1.35;
}
.pm-fin-hist-label .cost-tag {
  display: inline-block;
  font-size: 10.5px;
  color: var(--ink-3, #5a6a7e);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.pm-fin-hist-bar-track {
  background: var(--line-2, #f0f2f8);
  height: 22px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.pm-fin-hist-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #009ac7 0%, #171f69 100%);
  border-radius: 6px;
  transition: width .4s cubic-bezier(.2,.7,.4,1);
}
.pm-fin-hist-bar.full .pm-fin-hist-bar-fill {
  background: linear-gradient(90deg, #e31937 0%, #9a1227 100%);
}
.pm-fin-hist-count {
  font-family: var(--font-mono);
  font-weight: 800;
  color: #171f69;
  text-align: right;
  font-size: 14.5px;
}
.pm-fin-hist-count .pct {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3, #5a6a7e);
  margin-top: 1px;
}

.pm-fin-summary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e2e5ef);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media screen and (max-width: 760px) { .pm-fin-summary { grid-template-columns: 1fr; } }
.pm-fin-summary-item .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3, #5a6a7e);
  font-weight: 700;
  margin-bottom: 4px;
}
.pm-fin-summary-item .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: #171f69;
  line-height: 1;
}
.pm-fin-summary-item.red .value { color: #e31937; }
.pm-fin-summary-item.amber .value { color: #d97706; }

/* ── Asterisk / non-qualifying markers ───────────────────── */
.pm-asterisk {
  color: #e31937;
  font-weight: 700;
  font-size: 1.05em;
  vertical-align: super;
  line-height: 0;
}
.pm-footnote {
  font-size: 12.5px;
  color: var(--ink-2, #2d3a4a);
  padding: 12px 16px;
  background: rgba(227,25,55,.04);
  border-left: 3px solid #e31937;
  border-radius: 0 6px 6px 0;
  margin-top: 18px;
  line-height: 1.55;
}
.pm-footnote strong { color: #e31937; }

/* ── Loading & error states ──────────────────────────────── */
.pm-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3, #5a6a7e);
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line, #e2e5ef);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pm-loading-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--line, #e2e5ef);
  border-top-color: #171f69;
  border-right-color: #009ac7;
  border-radius: 50%;
  animation: pm-spin .9s linear infinite;
  margin: 0 auto 16px;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2, #2d3a4a);
}
.pm-loading-sub {
  font-size: 12px;
  color: var(--ink-4, #94a3b8);
  margin-top: 4px;
}
.pm-error {
  background: rgba(227,25,55,.05);
  border: 1px solid rgba(227,25,55,.20);
  border-left: 4px solid #e31937;
  padding: 16px 20px;
  border-radius: 8px;
  color: var(--ink, #0d1117);
  font-size: 13.5px;
  line-height: 1.6;
}
.pm-error strong { color: #e31937; }
.pm-error code {
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--line, #e2e5ef);
  color: #171f69;
}

/* ── Empty data state ────────────────────────────────────── */
.pm-empty {
  background: #fafbfd;
  border: 1px dashed var(--line, #e2e5ef);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3, #5a6a7e);
}
.pm-empty-title {
  font-weight: 700;
  color: var(--ink-2, #2d3a4a);
  margin-bottom: 6px;
  font-size: 15px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pm-empty-sub { font-size: 13px; line-height: 1.5; }

/* ── Print styles ────────────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  .pm-root, .pm-root * { visibility: visible; }
  .pm-root {
    position: absolute;
    left: 0; top: 0;
    padding: 12px;
    max-width: none;
  }
  .pm-hero-actions, .pm-controls { display: none !important; }
  .pm-section {
    break-inside: avoid;
    box-shadow: none;
    border-color: #ccc;
  }
  .pm-kpi { break-inside: avoid; page-break-inside: avoid; }
  .pm-kpi-strip, .pm-adv-breakdown, .pm-fee-table-wrap, .pm-flow-wrap, .pm-twolens {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pm-hero {
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .pm-section:hover { box-shadow: none; }
  /* Safety net: mobile.css is gated to `screen and (...)` so it should never
     apply while printing, but if a browser ever evaluates a max-width media
     feature against the print page box instead of the screen, this stops
     the phone-only fixed 1120px Sankey width (and its min-width, which wins
     over width when the two conflict) from pushing the diagram off-page. */
  .pm-flow-scroll { overflow: visible !important; margin: 0 !important; }
  .pm-flow-svg { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; }
}

/* ============================================================
   ADDITIONS: Cross-cohort comparison, Score/Placement,
   Status & Flags, Athlete Career, Click-to-filter
   ============================================================ */

/* ── Click-to-filter affordances ─────────────────────────── */
.pm-demo-rowhead.clickable,
.pm-zone-row.clickable {
  cursor: pointer;
  transition: background .14s, box-shadow .14s;
}
.pm-demo-rowhead.clickable:hover {
  background: rgba(0,154,199,.12) !important;
  box-shadow: inset 3px 0 0 #009ac7;
}
.pm-demo-rowhead.clickable.active {
  background: rgba(23,31,105,.10) !important;
  box-shadow: inset 3px 0 0 #171f69;
}
.pm-zone-row.clickable:hover { background: rgba(0,154,199,.06); border-radius: 8px; }
.pm-zone-row.clickable.active { background: rgba(23,31,105,.07); border-radius: 8px; }
.pm-demo-filter-on { color: #e31937; font-size: 10px; vertical-align: middle; }

/* ── Cross-cohort comparison ─────────────────────────────── */
.pm-cohort-cmp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
}
.pm-cohort-cmp-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #171f69;
}
.pm-cohort-cmp-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pm-cohort-cmp-pill {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line, #e2e5ef);
  background: #fff;
  color: var(--ink-2, #2d3a4a);
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.pm-cohort-cmp-pill:hover { border-color: #009ac7; color: #171f69; }
.pm-cohort-cmp-pill.active {
  background: #009ac7;
  color: #fff;
  border-color: #009ac7;
  box-shadow: 0 2px 6px rgba(0,154,199,.3);
}
.pm-cohort-cmp-clear {
  background: none;
  border: 1px solid rgba(227,25,55,.3);
  color: #e31937;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.pm-cohort-cmp-clear:hover { background: #e31937; color: #fff; }
.pm-cohort-cmp-slot { margin-bottom: 18px; }
.pm-cohort-cmp-overlay {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── Score & Placement (box plots) ───────────────────────── */
.pm-score-wrap {
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
}
.pm-score-svg { width: 100%; min-width: 700px; height: auto; display: block; }
.pm-score-event-label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  fill: #171f69;
}
.pm-score-event-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--ink-3, #5a6a7e);
}
.pm-score-hint {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  line-height: 1.5;
  flex: 1;
  min-width: 240px;
}
.pm-score-cutoff-key {
  display: inline-block;
  width: 16px;
  border-top: 2px dashed #e31937;
  vertical-align: middle;
  margin: 0 2px;
}

/* ── Status & Flags ──────────────────────────────────────── */
.pm-status-block {
  background: linear-gradient(180deg, #fafbfd 0%, #f7f8fc 100%);
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.pm-status-block-head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #171f69;
  margin-bottom: 4px;
}
.pm-status-block-sub {
  font-size: 12px;
  color: var(--ink-3, #5a6a7e);
  margin-bottom: 16px;
  line-height: 1.5;
}
.pm-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.pm-status-table th {
  background: #171f69;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 9px 14px;
  text-align: left;
  font-weight: 700;
}
.pm-status-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2, #f0f2f8);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-2, #2d3a4a);
}
.pm-status-table td:first-child,
.pm-status-table td:nth-child(2) { font-family: var(--font-ui); }
.pm-status-table tr:last-child td { border-bottom: none; }
.pm-status-hot { color: #e31937 !important; font-weight: 800; }

.pm-status-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.pm-status-flag-chip {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-left: 4px solid var(--c, #171f69);
  border-radius: 8px;
  padding: 14px 16px;
}
.pm-status-flag-chip .cnt {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--c, #171f69);
  line-height: 1;
}
.pm-status-flag-chip .lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3, #5a6a7e);
  font-weight: 700;
  margin-top: 6px;
}

/* ── Athlete Career Trace ────────────────────────────────── */
.pm-career-search {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.pm-career-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 11px 16px;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
  color: var(--ink, #0d1117);
  transition: border-color .15s, box-shadow .15s;
}
.pm-career-input:focus {
  outline: none;
  border-color: #171f69;
  box-shadow: 0 0 0 3px rgba(23,31,105,.1);
}
.pm-career-btn {
  background: #171f69;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.pm-career-btn:hover { background: #0d1040; }
.pm-career-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.pm-career-result {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pm-career-result:hover {
  border-color: #009ac7;
  box-shadow: 0 4px 12px rgba(0,154,199,.12);
  transform: translateY(-1px);
}
.pm-career-result-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #171f69;
}
.pm-career-result-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3, #5a6a7e);
}
.pm-career-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.pm-career-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #171f69;
}
.pm-career-clear {
  background: none;
  border: 1px solid var(--line, #e2e5ef);
  color: var(--ink-2, #2d3a4a);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.pm-career-clear:hover { border-color: #171f69; color: #171f69; }
.pm-career-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.pm-career-year {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: start;
}
.pm-career-year-label {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #171f69;
  padding-top: 8px;
}
.pm-career-stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pm-career-stage {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-top: 3px solid var(--c, #171f69);
  border-radius: 8px;
  padding: 12px 14px;
}
.pm-career-stage-head {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c, #171f69);
  margin-bottom: 8px;
}
.pm-career-final-badge {
  display: inline-block;
  background: #e31937;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 2px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.pm-career-stage-body { display: flex; gap: 14px; }
.pm-career-stat { display: flex; flex-direction: column; }
.pm-career-stat .v {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #0d1117);
  line-height: 1;
}
.pm-career-stat .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3, #5a6a7e);
  margin-top: 3px;
}
.pm-career-detail {
  background: #fff;
  border: 1px solid var(--line, #e2e5ef);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.pm-career-detail summary {
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #171f69;
  cursor: pointer;
  background: var(--surface-2, #f7f8fc);
  user-select: none;
}
.pm-career-detail summary:hover { background: rgba(0,154,199,.06); }
.pm-career-detail[open] summary { border-bottom: 1px solid var(--line, #e2e5ef); }
.pm-career-detail .pm-status-table { border-radius: 0; }


/* ====================================================================
   QUALIFICATION PIPELINE — alluvial flow ("the river")  [Section 1]
   Namespaced pm-flow-* (collision-checked against shared/design.css).
   Brand: navy #171f69, pool #009ac7, red #e31937. Red only on white.
   ==================================================================== */

/* new KPI accent variants (extend existing .pm-kpi) */
.pm-kpi.sky::before     { background: #56a8da; }
.pm-kpi.sky .pm-kpi-value     { color: #2f7fb8; }
.pm-kpi.neutral::before { background: #5a6a7e; }
.pm-kpi.neutral .pm-kpi-value { color: #2d3a4a; }

/* "Viewing" context chip row */
.pm-flow-viewing {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 16px;
}
.pm-flow-viewing-key {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3, #5a6a7e);
  margin-right: 2px;
}
.pm-flow-chip {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; color: #fff;
  background: #171f69; border-radius: 999px;
  padding: 4px 12px; line-height: 1.2;
}
.pm-flow-chip.all   { background: #eef1f8; color: #2d3a4a; }
.pm-flow-chip.muted { background: #f0f2f8; color: #5a6a7e; font-weight: 600; }

/* river canvas */
.pm-flow-wrap {
  background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
  border-radius: 14px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line, #e2e5ef);
  box-shadow: inset 0 1px 0 #fff;
}
.pm-flow-svg { width: 100%; height: auto; display: block; }

/* gate headers */
.pm-flow-stage {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; fill: #171f69;
  letter-spacing: .02em;
}
.pm-flow-stage.ghost { fill: #8294b4; }
.pm-flow-count {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 800; fill: #171f69; letter-spacing: 0;
}
.pm-flow-count-unit {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; fill: var(--ink-3, #5a6a7e);
}
.pm-flow-fee {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; fill: #8294b4;
}
.pm-flow-pending {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; fill: #8294b4; letter-spacing: .01em;
}

/* labels on the flows */
.pm-flow-advlabel {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; fill: #fff;
  paint-order: stroke; stroke: rgba(13,16,64,.22); stroke-width: 2px;
}
.pm-flow-exit-n {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; fill: #e31937; letter-spacing: 0;
}
.pm-flow-exit-sub {
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 600; fill: var(--ink-3, #5a6a7e);
}
.pm-flow-enter-n {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; fill: #2f7fb8; letter-spacing: 0;
}
.pm-flow-enter-sub {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; fill: var(--ink-3, #5a6a7e);
}
.pm-flow-rev {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; fill: #d97706;
}

/* legend */
.pm-flow-legend {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line, #e2e5ef);
  font-size: 12.5px; color: var(--ink-2, #2d3a4a);
}

/* ── Era-awareness notices (multi-season pipeline) ────────────────────────
   The circuit did not run the same way in every season the audit now covers,
   so the pipeline states the rule it applied, and refuses to compute an
   advancement split for seasons whose rules are unconfirmed. */
.pm-rules-unknown{
  margin:18px 0 6px; border:1px solid #e2e5ef; border-radius:12px;
  padding:18px 20px; background:#fff;
}
.pm-rules-unknown .pm-card-h{
  font-family:'Barlow Condensed',Inter,sans-serif; font-weight:700;
  font-size:20px; letter-spacing:.01em; color:#171F69;
  text-transform:uppercase; margin:0 0 8px;
}
.pm-note-caveat{
  background:#FFF4E5; border-left:3px solid #B26A00; color:#5A3600;
  padding:8px 10px; border-radius:4px; font-size:12.5px; line-height:1.5; margin:0;
}
.pm-note-rule{
  background:#F1F3F9; color:#171F69; border-left:3px solid #009AC7;
  padding:7px 10px; border-radius:4px; font-size:12.5px;
  line-height:1.5; margin:0 0 12px;
}