/* ============================================================
   NewMedSkills — Candidate portal styles (uses design tokens).
   Responsive from mobile to desktop.
   ============================================================ */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--text-primary); background: var(--cream-200); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; color: var(--text-primary); }
img { max-width: 100%; }
.cp-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---- Buttons ---- */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; white-space: nowrap; padding: 0 22px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; text-decoration: none; }
.cp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cp-btn [data-lucide] { width: 18px; height: 18px; }
.cp-btn--primary { background: var(--orange-500); color: #fff; box-shadow: var(--shadow-sm); }
.cp-btn--primary:hover { background: var(--orange-600); color: #fff; box-shadow: var(--shadow-primary); }
.cp-btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }
.cp-btn--ghost:hover { background: var(--greige-300); color: var(--brown-900); }
.cp-btn--block { width: 100%; }
.cp-btn--lg { height: 54px; font-size: 1.0625rem; border-radius: var(--radius-lg); }
.cp-btn--sm { height: 38px; padding: 0 14px; font-size: .875rem; border-radius: var(--radius-sm); }
.cp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- Wordmark ---- */
.cp-wm { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.cp-wm .n { color: var(--brown-900); } .cp-wm .m { color: var(--orange-500); }
.cp-wm .s { color: var(--brown-500); font-weight: 600; font-size: .55em; margin-left: 3px; letter-spacing: .04em; }
.cp-wm.on-dark .n { color: #fff; }

/* ---- Fields ---- */
.cp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cp-field label, .cp-label { font-size: .8125rem; font-weight: 700; color: var(--text-secondary); }
.cp-help { font-size: .75rem; color: var(--text-muted); }
.cp-field input, .cp-field select, .cp-field textarea,
.cp-input, .cp-textarea, .cp-select {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary);
  background: #fff; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 11px 13px; outline: none; transition: border-color .12s, box-shadow .12s;
}
.cp-field textarea, .cp-textarea { resize: vertical; line-height: 1.5; }
.cp-field input:focus, .cp-field select:focus, .cp-field textarea:focus,
.cp-input:focus, .cp-textarea:focus, .cp-select:focus { border-color: var(--orange-500); box-shadow: 0 0 0 4px var(--focus-ring); }
.cp-errors { color: var(--color-danger); font-size: .8125rem; margin-top: 3px; }
.cp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---- Messages ---- */
.cp-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cp-msg { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: var(--radius-md); font-size: .9375rem; font-weight: 500; }
.cp-msg [data-lucide] { width: 18px; height: 18px; flex: none; }
.cp-msg--success { background: var(--color-success-soft); color: var(--color-success); }
.cp-msg--error { background: var(--red-100); color: var(--color-danger); }
/* The cooldown message once the wait has elapsed: it stops being a warning
   and becomes an invitation, so it should not stay red. */
.cp-msg.cp-msg--done { background: rgba(147,204,205,.18); border-color: rgba(58,128,129,.35); color: #1F5B5C; }
.cp-msg--info { background: var(--color-info-soft); color: var(--color-info); }

/* ============================================================
   Auth (split screen)
   ============================================================ */
.cp-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.cp-auth__brand { position: relative; overflow: hidden; background: var(--brown-900); color: var(--cream-200); padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; }
.cp-auth__brand::before { content: ""; position: absolute; top: -160px; right: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--glow-1, rgba(244,173,104,.5)), transparent 70%); }
.cp-auth__brand-inner { position: relative; margin: auto 0; }
.cp-auth__brand h1 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: 22px 0 14px; }
.cp-auth__brand h1 .hl { color: var(--orange-400); }
.cp-auth__brand p { color: rgba(248,245,238,.75); font-size: 1.0625rem; max-width: 420px; }
.cp-auth__points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cp-auth__points li { display: flex; align-items: center; gap: 12px; color: rgba(248,245,238,.9); font-weight: 500; }
.cp-auth__points [data-lucide] { width: 20px; height: 20px; color: var(--orange-400); flex: none; }
.cp-auth__form { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 3rem); background: var(--cream-100); }
.cp-auth__card { width: 100%; max-width: 420px; }
.cp-auth__card h2 { font-size: 1.75rem; font-weight: 800; }
.cp-auth__sub { color: var(--text-muted); margin: 6px 0 24px; }
.cp-auth__foot { margin-top: 20px; font-size: .9375rem; color: var(--text-secondary); text-align: center; }
.cp-auth__mobilewm { display: none; }

/* Channel radios */
.cp-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cp-channel { position: relative; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; background: #fff; }
.cp-channel input { position: absolute; opacity: 0; }
.cp-channel [data-lucide] { width: 18px; height: 18px; color: var(--text-muted); }
.cp-channel:has(input:checked) { border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--focus-ring); color: var(--orange-700); }
.cp-channel:has(input:checked) [data-lucide] { color: var(--orange-600); }

/* OTP inputs */
.cp-otp { display: flex; gap: 10px; justify-content: space-between; margin: 6px 0 4px; }
.cp-otp input { width: 100%; aspect-ratio: 1; text-align: center; font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: #fff; color: var(--text-primary); }
.cp-otp input:focus { border-color: var(--orange-500); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
.cp-resend { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: .875rem; color: var(--text-muted); }

/* ============================================================
   Portal chrome (authenticated)
   ============================================================ */
.cp-nav { position: sticky; top: 0; z-index: 40; background: rgba(251,249,243,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border-subtle); }
.cp-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.cp-nav__links { display: flex; align-items: center; gap: 4px; }
.cp-nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 600; color: var(--text-secondary); }
.cp-nav__link:hover { color: var(--orange-600); text-decoration: none; background: var(--orange-50); }
.cp-nav__link.is-active { color: var(--orange-600); background: var(--orange-100); }
.cp-nav__link [data-lucide] { width: 17px; height: 17px; }
.cp-nav__right { display: flex; align-items: center; gap: 12px; }
.cp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--orange-100); color: var(--orange-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; overflow: hidden; flex: none; }
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border-subtle); background: #fff; border-radius: var(--radius-md); cursor: pointer; color: var(--brown-900); align-items: center; justify-content: center; }
.cp-nav__mobile { display: none; }
.cp-main { padding: clamp(1.5rem, 4vw, 2.5rem) 0 64px; }

/* Page head */
.cp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cp-head__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-500); }
.cp-head h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; margin-top: 4px; }
.cp-head p { color: var(--text-secondary); margin: 4px 0 0; }

/* Cards */
.cp-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.cp-card__title { font-size: 1.0625rem; font-weight: 700; }
.cp-card__body { padding: 20px; }
.cp-grid { display: grid; gap: 18px; }

/* ============================================================
   Dashboard
   ============================================================ */
.cp-dash { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.cp-hero { position: relative; overflow: hidden; background: var(--brown-900); color: var(--cream-200); border-radius: var(--radius-xl); padding: 26px 28px; display: flex; align-items: center; gap: 22px; }
.cp-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--glow-1, rgba(244,173,104,.45)), transparent 70%); }
.cp-hero__av { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--orange-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; flex: none; overflow: hidden; }
.cp-hero__av img { width: 100%; height: 100%; object-fit: cover; }
.cp-hero__meta { position: relative; }
.cp-hero__meta h2 { color: #fff; font-size: 1.5rem; }
.cp-hero__meta p { color: rgba(248,245,238,.75); margin: 3px 0 0; }
.cp-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--cream-200); border: 1px solid rgba(255,255,255,.16); }
.cp-chip [data-lucide] { width: 14px; height: 14px; color: var(--orange-300); }

/* Completion ring */
.cp-ring-card { display: flex; align-items: center; gap: 20px; }
.cp-ring { --pct: 0; position: relative; width: 120px; height: 120px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--orange-500) calc(var(--pct) * 1%), var(--greige-300) 0); }
.cp-ring::after { content: ""; position: absolute; inset: 12px; background: var(--surface-card); border-radius: 50%; }
.cp-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.cp-ring__num b { font-size: 1.75rem; font-weight: 800; color: var(--orange-500); letter-spacing: -.03em; }
.cp-ring__num span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.cp-ring--lg { width: 168px; height: 168px; }
.cp-ring--lg::after { inset: 15px; }
.cp-ring--lg .cp-ring__num b { font-size: 2.4rem; }

/* Stat tiles */
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cp-stat { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-xs); }
.cp-stat__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--orange-100); color: var(--orange-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cp-stat__num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text-primary); }
.cp-stat__label { font-size: .85rem; color: var(--text-muted); margin-top: 3px; }

/* To-do checklist (dashboard) */
.cp-todo__count { font-size: .72rem; font-weight: 700; color: var(--orange-700); background: var(--orange-100); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.cp-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-todo li { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: .9rem; color: var(--text-secondary); }
.cp-todo li:last-child { border-bottom: none; }
.cp-todo__dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--greige-500); background: var(--surface-card); flex: none; margin-top: 2px; }
.cp-todo__label { flex: 1; line-height: 1.4; min-width: 0; }
.cp-todo__more { font-size: .8rem; color: var(--text-muted); margin: 10px 0 0; }
.cp-todo__done { display: flex; align-items: center; gap: 12px; }
.cp-todo__done-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cp-todo__done-ic [data-lucide], .cp-todo__done-ic svg { width: 20px; height: 20px; }

/* Timeline (experience) */
.cp-timeline { position: relative; padding-left: 26px; }
.cp-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--greige-400); }
.cp-tl { position: relative; padding-bottom: 18px; }
.cp-tl::before { content: ""; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-card); border: 3px solid var(--orange-500); }
.cp-tl__role { font-weight: 700; }
.cp-tl__meta { font-size: .85rem; color: var(--text-muted); }
.cp-tl__desc { font-size: .9rem; color: var(--text-secondary); margin-top: 4px; }

/* Tag pills */
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.cp-tag { font-size: .85rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--orange-100); color: var(--orange-700); }
.cp-tag--muted { background: var(--greige-300); color: var(--brown-700); }

/* ---- CV upload / dropzone ---- */
.cp-drop { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--cream-100); padding: 40px 24px; text-align: center; transition: border-color .15s, background .15s; }
.cp-drop.is-over { border-color: var(--orange-500); background: var(--orange-50); }
.cp-drop__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-amber); color: var(--orange-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cp-drop__icon [data-lucide] { width: 28px; height: 28px; }
.cp-drop h3 { font-size: 1.2rem; }
.cp-drop p { color: var(--text-muted); margin: 6px 0 0; }
.cp-drop__file { margin-top: 14px; font-weight: 600; color: var(--orange-600); }
.cp-analyzing { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 30px; text-align: center; }
.cp-spinner { width: 44px; height: 44px; border: 4px solid var(--orange-100); border-top-color: var(--orange-500); border-radius: 50%; animation: cp-spin 0.8s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* Steps */
.cp-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.cp-step { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.cp-step__n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--greige-300); color: var(--brown-600); font-size: .8rem; }
.cp-step.is-active { color: var(--orange-600); } .cp-step.is-active .cp-step__n { background: var(--orange-500); color: #fff; }
.cp-step.is-done .cp-step__n { background: var(--color-success); color: #fff; }
.cp-step__sep { flex: 1; min-width: 20px; height: 2px; background: var(--greige-400); }

/* Repeatable editor rows */
.cp-repeat { display: flex; flex-direction: column; gap: 12px; }
.cp-row { position: relative; background: var(--cream-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px; }
.cp-row__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cp-row__rm { position: absolute; top: 8px; right: 8px; border: none; background: transparent; color: var(--color-danger); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); display: inline-flex; }
.cp-row__rm:hover { background: var(--red-100); }
.cp-mini { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: block; margin-bottom: 3px; }
.cp-add { align-self: flex-start; }

/* Spec-driven profile field grid */
.cp-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cp-fieldgrid .cp-field--full { grid-column: 1 / -1; }
.cp-agencies { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.cp-agencies [data-lucide] { width: 12px; height: 12px; color: var(--color-success); }
.cp-checkrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.cp-check { width: 18px; height: 18px; accent-color: var(--orange-500); flex: none; }
.cp-field input[type="file"] { font-size: .85rem; }
@media (max-width: 560px) { .cp-fieldgrid { grid-template-columns: 1fr; } }

/* Profile completeness bar */
.cp-bar { height: 10px; border-radius: 999px; background: var(--greige-300); overflow: hidden; }
.cp-bar__fill { height: 100%; border-radius: 999px; background: var(--gradient-ember); transition: width .8s var(--ease-out); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .cp-auth { grid-template-columns: 1fr; }
  .cp-auth__brand { display: none; }
  .cp-auth__mobilewm { display: block; text-align: center; margin-bottom: 20px; }
  .cp-dash { grid-template-columns: 1fr; }
  .cp-nav__links { display: none; }
  .cp-nav__toggle { display: inline-flex; }
  .cp-nav__mobile.is-open { display: flex; flex-direction: column; gap: 4px; padding: 12px clamp(1rem,4vw,2.5rem); background: var(--cream-100); border-bottom: 1px solid var(--border-subtle); }
  .cp-nav__mobile.is-open .cp-nav__link { padding: 12px; }
}
@media (max-width: 560px) {
  .cp-grid-2, .cp-stats { grid-template-columns: 1fr; }
  .cp-hero { flex-direction: column; text-align: center; }
  .cp-ring-card { flex-direction: column; text-align: center; }
}

/* ===== Stage 2 — Self Assessment + Journey ================================ */
/* Journey stepper */
.cp-journey { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.cp-jstep { scroll-snap-align: start; flex: 0 0 auto; width: 150px; text-decoration: none;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px;
  background: var(--surface-card); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.cp-jstep:hover { border-color: var(--orange-300); box-shadow: var(--shadow-sm); text-decoration: none; }
.cp-jstep__n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .8rem; background: var(--greige-200); color: var(--text-secondary); }
.cp-jstep__t { font-size: .82rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.cp-jstep__s { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.cp-jstep--done { background: var(--color-success-soft); border-color: transparent; }
.cp-jstep--done .cp-jstep__n { background: var(--color-success); color: #fff; }
.cp-jstep--done .cp-jstep__s { color: var(--color-success); }
.cp-jstep--current { border-color: var(--orange-500); box-shadow: 0 0 0 1px var(--orange-500); }
.cp-jstep--current .cp-jstep__n { background: var(--orange-500); color: #fff; }
.cp-jstep--current .cp-jstep__s { color: var(--orange-600); }
.cp-jstep--upcoming { opacity: .82; }

/* Role cards */
.cp-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cp-role { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px;
  background: var(--surface-card); display: flex; flex-direction: column; gap: 10px; }
.cp-role__name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.cp-role__meta { font-size: .82rem; color: var(--text-muted); }
.cp-pill { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cp-pill--todo { background: var(--greige-200); color: var(--text-secondary); }
.cp-pill--wip { background: var(--orange-100); color: var(--orange-700); }
.cp-pill--done { background: var(--color-success-soft); color: var(--color-success); }

/* Rating form */
.cp-asec { margin-top: 22px; }
.cp-asec__h { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-600); margin: 0 0 10px; }
.cp-dom { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: visible; margin-bottom: 14px; background: var(--surface-card); }
.cp-dom__h { padding: 12px 16px; background: var(--surface-muted); font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.cp-sub { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.cp-sub:last-child { border-bottom: none; }
.cp-sub__main { flex: 1 1 260px; min-width: 0; }
.cp-sub__name { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 7px; }
.cp-sub__w { font-size: .68rem; font-weight: 700; color: var(--text-muted); background: var(--greige-200); border-radius: 999px; padding: 1px 8px; }
.cp-info { cursor: help; color: var(--greige-500); display: inline-flex; }
.cp-info [data-lucide], .cp-info svg { width: 15px; height: 15px; }
/* Indicator tooltip — instant on hover, readable, click/tap to toggle */
.cp-tipwrap { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--greige-500); vertical-align: middle; }
.cp-tipwrap:hover, .cp-tipwrap:focus-visible, .cp-tipwrap.is-open { color: var(--orange-500); }
.cp-tipwrap [data-lucide], .cp-tipwrap svg { width: 17px; height: 17px; }
.cp-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(5px);
  width: max-content; max-width: min(320px, 78vw); text-align: left; z-index: 60;
  background: var(--surface-card, #fff); color: var(--text-primary); border: 1px solid var(--border-subtle);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .08s ease, transform .08s ease; }
.cp-tipwrap:hover .cp-tip, .cp-tipwrap:focus-visible .cp-tip, .cp-tipwrap.is-open .cp-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.cp-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--surface-card, #fff); }
.cp-tip__h { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-600, #d8410b); margin-bottom: 7px; }
.cp-tip__i { display: block; position: relative; padding-left: 15px; font-size: .86rem; line-height: 1.45; color: var(--text-secondary); margin-bottom: 5px; }
.cp-tip__i:last-child { margin-bottom: 0; }
.cp-tip__i::before { content: '•'; position: absolute; left: 3px; color: var(--orange-500); font-weight: 700; }
/* segmented 1–5 scale */
.cp-rate { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.cp-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-rate label { width: 40px; text-align: center; padding: 8px 0; font-weight: 700; font-size: .9rem; color: var(--text-secondary);
  cursor: pointer; border-left: 1px solid var(--border-default); user-select: none; transition: background .12s, color .12s; }
.cp-rate label:first-of-type { border-left: none; }
.cp-rate label:hover { background: var(--orange-50); }
.cp-rate input:checked + label { background: var(--orange-500); color: #fff; }
.cp-rate--ro label { cursor: default; }
.cp-scalekey { font-size: .74rem; color: var(--text-muted); }

/* sticky action bar */
.cp-actionbar { position: sticky; bottom: 0; z-index: 5; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; box-shadow: var(--shadow-md); margin-top: 18px; flex-wrap: wrap; }

/* result breakdown */
.cp-bd { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.cp-bd:last-child { border-bottom: none; }
.cp-bd__name { flex: 1 1 200px; font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.cp-bd__track { flex: 2 1 220px; height: 9px; border-radius: 999px; background: var(--greige-200); overflow: hidden; }
.cp-bd__fill { height: 100%; background: var(--orange-500); border-radius: 999px; }
.cp-bd__val { flex: 0 0 auto; font-weight: 700; color: var(--text-secondary); font-size: .85rem; width: 88px; text-align: right; }

/* ===== Dashboard v2 — "The Concierge Flight Path" ========================= */
.cp-dash2 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.cp-hero2, .cp-path, .cp-foot { grid-column: span 12; }
.cp-desk, .cp-career, .cp-caps { grid-column: span 7; }
.cp-index, .cp-cvinsight, .cp-training { grid-column: span 5; }
/* Every card in this grid MUST carry a span class. Without one it falls back to
   `grid-column: auto`, which in a 12-column grid is a single ~90px column — the
   card still renders, so it looks like a styling nit rather than a missing class,
   and its heading, body copy and button all wrap into ribbons. */
@media (max-width: 900px) { .cp-dash2 { grid-template-columns: 1fr; } .cp-dash2 > * { grid-column: 1 / -1 !important; } }

/* entrance choreography (pure CSS, reduced-motion safe, no-JS safe) */
.cp-reveal { animation: cp-rise .55s cubic-bezier(.22,1,.36,1) both; }
.cp-dash2 > .cp-reveal:nth-child(2) { animation-delay: .06s; }
.cp-dash2 > .cp-reveal:nth-child(3) { animation-delay: .12s; }
.cp-dash2 > .cp-reveal:nth-child(4) { animation-delay: .16s; }
.cp-dash2 > .cp-reveal:nth-child(n+5) { animation-delay: .2s; }
@keyframes cp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cp-kicker { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #875C66; margin-bottom: 3px; }

/* --- 1 · Departure Board hero --- */
.cp-hero2 { position: relative; overflow: hidden; background: var(--surface-dark, #33000F); color: #fff;
  border-radius: var(--radius-2xl, 24px); box-shadow: var(--shadow-lg); padding: 40px;
  display: grid; grid-template-columns: 1.2fr auto; gap: 28px; align-items: center; }
.cp-hero2::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(620px 320px at 88% -12%, rgba(236,72,1,.30), transparent 60%),
  radial-gradient(520px 300px at -6% 120%, rgba(236,72,1,.12), transparent 60%); }
.cp-hero2__id { position: relative; z-index: 1; min-width: 0; }
.cp-hero2__eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange-300, #f6a878); margin-bottom: 10px; }
.cp-hero2__name { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.04; margin: 0 0 10px; color: #fff; }
.cp-hero2__deck { font-size: .98rem; color: rgba(255,255,255,.74); margin: 0 0 16px; max-width: 52ch; line-height: 1.5; }
.cp-hero2__meta { display: flex; flex-wrap: wrap; align-items: center; font-size: .82rem; color: rgba(255,255,255,.6); }
.cp-hero2__meta span:not(:last-child)::after { content: '·'; margin: 0 10px; color: rgba(255,255,255,.32); }

.cp-portrait { position: relative; width: 148px; height: 148px; z-index: 1; justify-self: center; }
.cp-portrait-arc { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.cp-portrait-arc circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.cp-portrait-arc__track { stroke: rgba(255,255,255,.14); }
.cp-portrait-arc__preview { stroke: var(--orange-300, #f6a878); opacity: .85; transition: stroke-dasharray .2s ease; }
.cp-portrait-arc__fill { stroke: var(--orange-500, #EC4801); transition: stroke-dasharray .9s cubic-bezier(.22,1,.36,1); }
.cp-portrait__av { position: absolute; inset: 15px; border-radius: 50%; overflow: hidden; background: var(--color-accent-soft, #f3e2d9);
  color: var(--orange-700, #b83a08); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.9rem; }
.cp-portrait__av img { width: 100%; height: 100%; object-fit: cover; }
.cp-portrait__pill { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: #fff; color: var(--brown-900, #33000F); font-size: .74rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow-md); }
.cp-portrait__pill b { color: var(--orange-600, #d8410b); font-variant-numeric: tabular-nums; }

.cp-next { position: relative; z-index: 2; grid-column: 1 / -1; justify-self: end; align-self: end; width: min(430px, 100%);
  background: var(--cream-100, #F8F5EE); color: var(--text-primary); border-radius: var(--radius-xl, 18px);
  box-shadow: var(--shadow-md); padding: 20px 22px; margin-bottom: -26px; margin-top: 14px; }
.cp-next__eyebrow { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-600, #d8410b); margin-bottom: 6px; }
.cp-next__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.cp-next__body { font-size: .875rem; color: #875C66; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-next__cta { box-shadow: var(--shadow-primary); position: relative; overflow: hidden; }
.cp-next__cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: cp-sweep 1s ease 1.2s 1; }
@keyframes cp-sweep { to { left: 130%; } }
.cp-next__note { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #875C66; margin: 12px 0 0; }
.cp-next__note [data-lucide] { width: 15px; height: 15px; color: var(--color-success, #1F8A5B); flex: none; }

/* --- 2 · Flight Path --- */
.cp-path { background: var(--surface-card, #fff); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl, 24px); box-shadow: var(--shadow-sm); padding: 22px 28px 26px; }
.cp-path__h { font-size: 1.12rem; font-weight: 700; color: var(--text-primary); }
.cp-path__pill { font-size: .74rem; font-weight: 700; color: var(--orange-700, #b83a08); background: var(--color-primary-soft, #FEE7DA); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.cp-path__wrap { position: relative; height: 160px; margin-top: 14px; }
.cp-path__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-path__base { fill: none; stroke: var(--greige-500, #c8bba9); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.cp-path__flown { fill: none; stroke: var(--orange-500, #EC4801); stroke-width: 3.5; stroke-linecap: round; }
.cp-path__nodes { position: absolute; inset: 0; }
.cp-path__node { position: absolute; width: 0; height: 0; }
.cp-path__dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--greige-500, #c8bba9); display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff; transform: translate(-50%, -50%) scale(1); }
.cp-path__dot [data-lucide] { width: 11px; height: 11px; }
.cp-path__node--done .cp-path__dot { background: var(--orange-500, #EC4801); border-color: var(--orange-500, #EC4801); }
.cp-path__node--current .cp-path__dot { width: 28px; height: 28px; background: var(--orange-500, #EC4801); border-color: #fff;
  font-size: .84rem; box-shadow: 0 0 0 6px rgba(236,72,1,.16); animation: cp-halo 3s ease-in-out infinite; }
@keyframes cp-halo { 0%,100% { box-shadow: 0 0 0 6px rgba(236,72,1,.16); } 50% { box-shadow: 0 0 0 11px rgba(236,72,1,.06); } }
.cp-path__label { position: absolute; left: 0; top: 22px; transform: translateX(-50%); width: 82px; text-align: center; font-size: .63rem; font-weight: 600; line-height: 1.15; color: var(--text-muted); }
.cp-path__node--done .cp-path__label, .cp-path__node--current .cp-path__label { color: var(--text-primary); }
.cp-path__here { position: absolute; left: 0; bottom: 22px; transform: translateX(-50%); white-space: nowrap; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #875C66; }
.cp-path__tip { position: absolute; left: 0; bottom: 40px; transform: translateX(-50%) translateY(6px); width: 196px; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 9px 12px; opacity: 0; visibility: hidden; transition: .16s; pointer-events: none; z-index: 6; }
.cp-path__tip b { display: block; font-size: .78rem; color: var(--text-primary); margin-bottom: 2px; }
.cp-path__tip span { font-size: .72rem; color: var(--text-muted); line-height: 1.35; }
.cp-path__node:hover .cp-path__tip, .cp-path__node:focus-visible .cp-path__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cp-path__end { position: absolute; top: 0; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #875C66; }
.cp-path__end--l { left: 2px; } .cp-path__end--r { right: 2px; }
.cp-path__plane { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 4; opacity: 0; }
/* node pop-in only when JS drives it */
.cp-path__wrap.is-anim .cp-path__dot { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
.cp-path__wrap.is-anim.is-in .cp-path__dot { transform: translate(-50%, -50%) scale(1); opacity: 1;
  transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .3s; transition-delay: calc(var(--i,0) * 65ms); }
.cp-path-v { display: none; }

/* --- 3 · On your desk --- */
.cp-desk__row { display: flex; align-items: center; gap: 13px; padding: 12px 8px; border-bottom: 1px solid var(--border-subtle); border-radius: 10px; text-decoration: none; transition: background .12s; }
.cp-desk__row:last-of-type { border-bottom: none; }
.cp-desk__row:hover { background: var(--color-accent-soft, #f6ece6); }
.cp-desk__num { font-size: 1.55rem; font-weight: 300; color: var(--text-muted); font-variant-numeric: tabular-nums; width: 32px; flex: none; text-align: center; }
.cp-desk__main { flex: 1; min-width: 0; }
.cp-desk__label { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.cp-desk__label [data-lucide] { width: 15px; height: 15px; color: var(--orange-500); flex: none; }
.cp-desk__why { display: block; font-size: .78rem; color: #875C66; margin-top: 1px; }
.cp-desk__gain { font-size: .72rem; font-weight: 800; color: var(--orange-800, #7a2e0a); background: var(--orange-100, #ffe3d3); padding: 3px 9px; border-radius: 999px; flex: none; }
.cp-desk__chev { width: 18px; height: 18px; color: var(--greige-500); flex: none; transition: transform .12s, color .12s; }
.cp-desk__row:hover .cp-desk__chev { transform: translateX(4px); color: var(--orange-500); }
.cp-desk__more { font-size: .8rem; color: var(--text-muted); margin: 10px 0 0; padding-left: 8px; }

/* --- 4 · Your file (typeset index) --- */
.cp-index__sub { font-size: .8rem; color: #875C66; margin: -6px 0 10px; }
.cp-index__row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; text-decoration: none; color: var(--text-secondary); font-size: .92rem; }
.cp-index__leader { flex: 1; border-bottom: 2px dotted var(--greige-400, #d8ccbb); transform: translateY(-5px); }
.cp-index__val { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cp-index__val--ok { color: var(--color-success, #1F8A5B); }
.cp-index__row:hover > span:first-child { color: var(--orange-600, #d8410b); }
.cp-index__row--cv .cp-index__val { font-size: .92rem; }
.cp-index__row--cv.cv-analyzed .cp-index__val { color: var(--color-success, #1F8A5B); }
.cp-index__row--cv.cv-processing .cp-index__val { color: var(--color-warning, #E8920C); animation: cp-pulse 2s ease-in-out infinite; }
.cp-index__row--cv.cv-failed .cp-index__val { color: var(--color-danger, #D92D20); }
.cp-index__row--cv.cv-none .cp-index__val { color: var(--text-muted); }
@keyframes cp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* --- 5 · Career record --- */
.cp-tl__role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cp-tl__co { color: #875C66; font-weight: 500; }
.cp-tl__role .cp-tl__meta { margin-left: auto; font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }

/* --- 6 · CV insight --- */
.cp-cvinsight__lead { font-size: .9rem; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; }
.cp-cvinsight__lead b { color: var(--orange-600, #d8410b); font-weight: 700; }
.cp-bar__fill--indet { width: 38%; background: var(--gradient-ember, linear-gradient(90deg,#EC4801,#f6a878)); animation: cp-indet 1.3s ease-in-out infinite; }
@keyframes cp-indet { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }

/* --- 7 · Capabilities --- */
.cp-tag--hot { background: var(--color-accent-soft, #f6ece6); border-color: transparent; color: var(--orange-700, #b83a08); }

/* --- 8 · Footer --- */
.cp-foot { text-align: center; color: var(--text-muted); font-size: .82rem; padding: 28px 0 6px; margin: 0; }

@media (max-width: 900px) {
  .cp-hero2 { grid-template-columns: 1fr; padding: 26px 22px; text-align: left; }
  .cp-portrait { justify-self: start; }
  .cp-next { width: 100%; margin-bottom: 0; }
  .cp-path__wrap { display: none; }
  .cp-path-v { display: block; list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
  .cp-path-v::before { content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--greige-400, #d8ccbb); }
  .cp-path-v__row { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; text-decoration: none; }
  .cp-path-v__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--greige-500,#c8bba9);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; color: var(--text-muted); flex: none; }
  .cp-path-v__row--done .cp-path-v__dot { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
  .cp-path-v__row--current .cp-path-v__dot { border-color: var(--orange-500); color: var(--orange-600); box-shadow: 0 0 0 4px rgba(236,72,1,.14); }
  .cp-path-v__body { padding-top: 5px; }
  .cp-path-v__t { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
  .cp-path-v__row--upcoming .cp-path-v__t { color: var(--text-muted); }
  .cp-path-v__b { display: block; font-size: .8rem; color: #875C66; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-reveal, .cp-next__cta::after, .cp-path__node--current .cp-path__dot, .cp-index__row--cv.cv-processing .cp-index__val, .cp-bar__fill--indet { animation: none !important; }
  .cp-reveal { opacity: 1; transform: none; }
}
@keyframes cp-float { 0%,100% { margin-top: 0; } 50% { margin-top: -3px; } }

/* ===== Self-assessment role picker ======================================== */
.cp-rolepicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cp-rolepick { position: relative; cursor: pointer; }
.cp-rolepick input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-rolepick__box { display: block; position: relative; padding: 20px 20px 18px; border-radius: var(--radius-lg, 16px);
  background: var(--surface-card, #fff); border: 1.5px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.cp-rolepick:hover .cp-rolepick__box { border-color: var(--orange-300, #f6a878); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cp-rolepick input:focus-visible + .cp-rolepick__box { outline: 2px solid var(--orange-500); outline-offset: 2px; }
.cp-rolepick input:checked + .cp-rolepick__box { border-color: var(--orange-500, #EC4801); box-shadow: 0 0 0 1px var(--orange-500, #EC4801), var(--shadow-md); }
.cp-rolepick__name { display: block; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.cp-rolepick__meta { display: block; font-size: .82rem; color: var(--text-muted); margin-top: 3px; }
.cp-rolepick__tick { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.cp-rolepick__tick [data-lucide] { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .15s; }
.cp-rolepick input:checked + .cp-rolepick__box .cp-rolepick__tick { background: var(--orange-500, #EC4801); border-color: var(--orange-500, #EC4801); }
.cp-rolepick input:checked + .cp-rolepick__box .cp-rolepick__tick [data-lucide] { opacity: 1; }
.cp-linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--orange-600, #d8410b); font-weight: 600; font-size: .88rem; padding: 4px 0; font-family: inherit; }
.cp-linkbtn:hover { text-decoration: underline; }
.cp-linkbtn [data-lucide] { width: 15px; height: 15px; }

/* =========================================================================
   Self-assessment RESULT — flagship readiness snapshot (v11)
   ========================================================================= */
:root{ --band-str:#12b886; --band-str-soft:#e6f7f1; --band-str-ink:#0b8a63;
       --band-dev:#f59f00; --band-dev-soft:#fff4e0; --band-dev-ink:#b8730b;
       --band-gap:#fa5252; --band-gap-soft:#ffe9e9; --band-gap-ink:#d63333; }
.cp-lede{max-width:66ch;color:var(--text-secondary,#6b5b52);font-size:.98rem;line-height:1.6;margin:.55rem 0 0;}
.cp-muted{color:var(--text-secondary,#8a7a70);}
.cp-hint{font-size:.78rem;font-weight:500;}
.cp-btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cp-fill--strength{background:linear-gradient(90deg,#0ca678,#12b886)!important;}
.cp-fill--developing{background:linear-gradient(90deg,#f08c00,#f59f00)!important;}
.cp-fill--gap{background:linear-gradient(90deg,#e8590c,#fa5252)!important;}

/* hero grid: readiness ring + radar */
.cp-rhero{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:16px;}
@media(max-width:860px){.cp-rhero{grid-template-columns:1fr;}}
.cp-rscore__body{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.cp-rscore__meta{flex:1;min-width:220px;}
.cp-bandcounts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.cp-bandcount{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--border-subtle,#E7DFD2);background:#fff;color:var(--text-secondary,#6b5b52);cursor:default;}
.cp-bandcount b{font-size:.95rem;font-variant-numeric:tabular-nums;}
.cp-bandcount--strength b{color:var(--band-str-ink);} .cp-bandcount--developing b{color:var(--band-dev-ink);} .cp-bandcount--gap b{color:var(--band-gap-ink);}
.cp-pulse{display:block;width:100%;height:26px;margin:8px 0 2px;}
.cp-pulse path{fill:none;stroke:var(--orange-500,#EC4801);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:cp-ekg 2.6s cubic-bezier(.6,0,.2,1) .3s forwards;}
@keyframes cp-ekg{to{stroke-dashoffset:0;}}

/* competency radar */
.cp-radarcard__body{display:flex;justify-content:center;padding-top:4px;}
.cp-radar{width:100%;max-width:330px;height:auto;overflow:visible;}
.cp-radar__grid circle{fill:none;stroke:var(--greige-300,#e5dccb);stroke-width:1;}
.cp-radar__grid circle:last-of-type{stroke:var(--greige-400,#d8ccb6);}
.cp-radar__grid line{stroke:var(--greige-300,#e5dccb);stroke-width:1;}
.cp-radar__area{fill:rgba(236,72,1,.15);stroke:var(--orange-500,#EC4801);stroke-width:2;stroke-linejoin:round;}
.cp-radar__dots circle{fill:var(--orange-500,#EC4801);stroke:#fff;stroke-width:1.5;}
.cp-radar__labels text{font-size:10px;font-weight:600;fill:var(--text-secondary,#6b5b52);}

/* strengths vs gaps */
.cp-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media(max-width:720px){.cp-split{grid-template-columns:1fr;}}
.cp-splitcol--str{border-top:3px solid var(--band-str);} .cp-splitcol--gap{border-top:3px solid var(--band-gap);}
.cp-splitcol .cp-card__title i{width:17px;height:17px;vertical-align:-3px;margin-right:5px;}
.cp-splitcol--str .cp-card__title i{color:var(--band-str-ink);} .cp-splitcol--gap .cp-card__title i{color:var(--band-gap);}
.cp-mini{display:flex;flex-direction:column;gap:11px;}
.cp-mini__row{display:grid;grid-template-columns:1fr 92px 46px;gap:10px;align-items:center;}
.cp-mini__name{font-size:.88rem;font-weight:600;color:var(--text-primary,#33000F);}
.cp-mini__bar{height:8px;border-radius:99px;background:var(--greige-200,#efe7d8);overflow:hidden;}
.cp-mini__fill{display:block;height:100%;border-radius:99px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.cp-mini__val{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;text-align:right;color:var(--text-secondary,#6b5b52);}

/* domain breakdown table + accordion */
.cp-dt{display:flex;flex-direction:column;}
.cp-dt__headrow,.cp-dt__row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(84px,1.4fr) 74px 64px 116px;gap:12px;align-items:center;}
.cp-dt__headrow{padding:4px 14px 10px;border-bottom:1px solid var(--border-subtle,#E7DFD2);}
.cp-dt__h{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--greige-500,#a8977f);display:inline-flex;align-items:center;gap:4px;}
.cp-dt__h--score,.cp-dt__h--cov{justify-content:flex-end;}
.cp-hbtn{border:none;background:none;padding:0;cursor:help;color:var(--greige-400,#c8b9a0);display:inline-flex;}
.cp-hbtn i{width:13px;height:13px;} .cp-hbtn:hover{color:var(--orange-500,#EC4801);}
.cp-acc{border-bottom:1px solid var(--border-subtle,#f0e9dc);}
.cp-dt__row{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:13px 14px;font:inherit;transition:background .15s;}
.cp-dt__row:hover{background:var(--cream-100,#faf6ee);}
.cp-dt__row:focus-visible{outline:2px solid var(--orange-500,#EC4801);outline-offset:-2px;border-radius:8px;}
.cp-dt__c{min-width:0;}
.cp-dt__c--name{display:flex;align-items:center;gap:8px;}
.cp-acc__chev{width:16px;height:16px;color:var(--greige-500,#a8977f);flex:0 0 auto;transition:transform .2s;}
.cp-acc.is-open .cp-acc__chev{transform:rotate(90deg);color:var(--orange-500,#EC4801);}
.cp-dt__nm{font-weight:600;font-size:.92rem;color:var(--text-primary,#33000F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-dt__section{display:block;font-style:normal;font-size:.72rem;color:var(--greige-500,#a8977f);font-weight:500;}
.cp-dt__c--bar .cp-bd__track{width:100%;display:block;height:9px;background:var(--greige-200,#efe7d8);}
.cp-dt__c--bar .cp-bd__fill{display:block;height:100%;width:0;border-radius:999px;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.cp-dt__c--score{text-align:right;font-variant-numeric:tabular-nums;} .cp-dt__c--score b{font-size:1rem;color:var(--text-primary,#33000F);}
.cp-dt__c--cov{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-secondary,#6b5b52);}

/* status bands */
.cp-band{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;}
.cp-band--sm{font-size:.66rem;padding:2px 7px;}
.cp-band--strength{background:var(--band-str-soft);color:var(--band-str-ink);}
.cp-band--developing{background:var(--band-dev-soft);color:var(--band-dev-ink);}
.cp-band--gap{background:var(--band-gap-soft);color:var(--band-gap-ink);}
.cp-band--none{background:var(--greige-200,#efe7d8);color:var(--greige-500,#a8977f);}

/* accordion subdomain panel */
.cp-acc__panel{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.2,.8,.2,1);}
.cp-acc__inner{padding:4px 14px 16px 38px;}
.cp-subhead,.cp-subrow{display:grid;grid-template-columns:minmax(0,2fr) 132px 52px 96px;gap:10px;align-items:center;}
.cp-subhead{padding:7px 0;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--greige-500,#a8977f);border-bottom:1px dashed var(--border-subtle,#eadfce);}
.cp-subrow{padding:8px 0;border-bottom:1px solid var(--cream-100,#f5efe4);}
.cp-subrow:last-child{border-bottom:none;}
.cp-subrow__name{font-size:.85rem;color:var(--text-primary,#33000F);}
.cp-subrow__dots{display:inline-flex;align-items:center;gap:3px;}
.cp-dot{width:9px;height:9px;border-radius:50%;background:var(--greige-200,#e6ddcc);display:inline-block;}
.cp-dot--on.cp-dot--strength{background:var(--band-str);} .cp-dot--on.cp-dot--developing{background:var(--band-dev);} .cp-dot--on.cp-dot--gap{background:var(--band-gap);}
.cp-subrow__num{margin-left:7px;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary,#6b5b52);}
.cp-wchip{font-size:.7rem;font-weight:700;color:var(--orange-600,#d8410b);background:var(--orange-50,#fff3ec);padding:2px 7px;border-radius:6px;cursor:help;}

/* next-step card */
.cp-nextcard{margin-top:16px;background:linear-gradient(120deg,#fff,var(--orange-50,#fff3ec));border:1px solid var(--orange-100,#ffe0cf);}
.cp-nextcard__body{display:flex;gap:16px;align-items:center;}
.cp-nextcard__icon{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background:var(--orange-500,#EC4801);color:#fff;display:flex;align-items:center;justify-content:center;}
.cp-nextcard__icon i{width:26px;height:26px;}
.cp-nextcard__t{margin:2px 0 4px;font-size:1.15rem;color:var(--text-primary,#33000F);}

/* shared fixed tooltip (escapes overflow) */
.cp-tip2{position:fixed;z-index:9999;max-width:250px;background:var(--brown-900,#2a0a12);color:#fff;font-size:.78rem;line-height:1.42;padding:8px 11px;border-radius:9px;box-shadow:0 12px 32px rgba(51,0,15,.24);opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;pointer-events:none;}
.cp-tip2.is-on{opacity:1;transform:translateY(0);}

@media(prefers-reduced-motion:reduce){
  .cp-pulse path{animation:none;stroke-dashoffset:0;}
  .cp-mini__fill,.cp-bd__fill,.cp-acc__panel,.cp-acc__chev{transition:none;}
}

/* =========================================================================
   Stage 3 — NewMedSkills Assessment (intro / take / result)  (v14)
   ========================================================================= */
.cp-howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0;}
.cp-how{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:12px;background:var(--cream-100,#faf6ee);}
.cp-how i{width:20px;height:20px;color:var(--orange-500,#EC4801);flex:0 0 auto;margin-top:1px;}
.cp-how b{display:block;font-size:.92rem;color:var(--text-primary,#33000F);}
.cp-how span{display:block;font-size:.8rem;}
.cp-instr{margin-top:14px;padding:14px 16px;border-left:3px solid var(--orange-500,#EC4801);background:var(--orange-50,#fff3ec);border-radius:0 10px 10px 0;}
.cp-instr__h{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-600,#d8410b);margin-bottom:6px;}
.cp-instr ul{margin:0;padding-left:18px;color:var(--text-secondary,#6b5b52);font-size:.9rem;line-height:1.6;}

.cp-actionbar--top{position:sticky;top:0;z-index:20;margin-bottom:14px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border:1px solid var(--border-subtle,#E7DFD2);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:14px;justify-content:space-between;}

/* question card */
.cp-q{padding:16px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:14px;background:#fff;margin:12px 0;}
.cp-q__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.cp-q__n{font-size:.72rem;font-weight:800;color:var(--greige-500,#a8977f);letter-spacing:.04em;}
.cp-qtype{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px;background:var(--greige-200,#efe7d8);color:var(--text-secondary,#6b5b52);}
.cp-qtype--descriptive{background:#efe7ff;color:#6b46c1;}
.cp-qtype--multi{background:#e0f2fe;color:#0369a1;}
.cp-q__marks{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--orange-600,#d8410b);cursor:default;}
.cp-q__text{margin:0 0 12px;font-size:1rem;font-weight:600;color:var(--text-primary,#33000F);line-height:1.5;}
.cp-textarea{resize:vertical;min-height:90px;font-family:inherit;}

.cp-choices{display:flex;flex-direction:column;gap:8px;}
.cp-choice{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1.5px solid var(--border-subtle,#E7DFD2);border-radius:11px;cursor:pointer;transition:border-color .12s,background .12s;}
.cp-choice:hover{border-color:var(--orange-300,#ffb38a);background:var(--cream-100,#faf6ee);}
.cp-choice input{width:18px;height:18px;accent-color:var(--orange-500,#EC4801);flex:0 0 auto;}
.cp-choice span{font-size:.92rem;color:var(--text-primary,#33000F);}
.cp-choice:has(input:checked){border-color:var(--orange-500,#EC4801);background:var(--orange-50,#fff3ec);}

/* new answer types + scenario */
.cp-qtype--fill_blank{background:#e7f6ec;color:#1c7c47;}
.cp-qtype--match{background:#fef0e6;color:#b5480d;}
.cp-qtype--scenario{background:#eae6ff;color:#5b3cc4;}
.cp-scenario{margin:0 0 14px;border:1px solid var(--border-subtle,#E7DFD2);border-left:3px solid var(--orange-400,#ff8a4c);border-radius:11px;background:var(--cream-100,#faf6ee);padding:12px 14px;}
.cp-scenario__text{margin:0;font-size:.92rem;line-height:1.6;color:var(--text-secondary,#6b5b52);}
.cp-scenario__img{max-width:100%;border-radius:9px;display:block;}
.cp-scenario__media{width:100%;max-height:360px;border-radius:9px;background:#000;}
.cp-scenario__frame{position:relative;width:100%;padding-top:56.25%;border-radius:9px;overflow:hidden;background:#000;}
.cp-scenario__frame--pdf{padding-top:0;height:460px;background:#fff;}
.cp-scenario__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cp-scenario__frame--pdf iframe{position:static;}
.cp-scenario__doc{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-weight:700;font-size:.86rem;color:var(--orange-600,#d8410b);}
.cp-scenario__doc i{width:16px;height:16px;}

.cp-fillq{line-height:2.1;}
.cp-fillin{display:inline-block;width:auto;min-width:120px;margin:0 4px;padding:4px 10px;border:none;border-bottom:2px solid var(--orange-400,#ff8a4c);background:var(--orange-50,#fff3ec);border-radius:6px 6px 0 0;font:inherit;font-weight:600;color:var(--text-primary,#33000F);}
.cp-fillin:focus{outline:none;border-bottom-color:var(--orange-600,#d8410b);background:#fff;}

.cp-match{display:flex;flex-direction:column;gap:9px;}
.cp-match__row{display:flex;align-items:center;gap:10px;}
.cp-match__left{flex:1;min-width:0;padding:10px 13px;border:1.5px solid var(--border-subtle,#E7DFD2);border-radius:10px;background:#fff;font-size:.92rem;font-weight:600;color:var(--text-primary,#33000F);}
.cp-match__arrow{width:17px;height:17px;flex:0 0 auto;color:var(--greige-500,#a8977f);}
.cp-match__sel{flex:1;min-width:0;}
@media(max-width:520px){.cp-match__row{flex-wrap:wrap;}.cp-match__arrow{display:none;}.cp-match__left,.cp-match__sel{flex:1 1 100%;}}

/* result review — fill/match per-item breakdown */
.cp-revgrid{margin:8px 0 0 26px;display:flex;flex-direction:column;gap:5px;}
.cp-revrow{display:flex;align-items:center;gap:9px;font-size:.82rem;flex-wrap:wrap;}
.cp-revrow__l{min-width:96px;font-weight:700;color:var(--text-secondary,#6b5b52);}
.cp-revrow__g{padding:2px 9px;border-radius:6px;font-weight:600;}
.cp-revrow--ok .cp-revrow__g{background:#e7f6ec;color:#1c7c47;}
.cp-revrow--no .cp-revrow__g{background:#fdecec;color:#c53030;text-decoration:line-through;}
.cp-revrow__c{display:inline-flex;align-items:center;gap:3px;color:#1c7c47;font-weight:700;}

/* grading spinner */
.cp-gradespin{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--orange-50,#fff3ec);display:flex;align-items:center;justify-content:center;color:var(--orange-500,#EC4801);animation:cp-pulse 1.6s ease-in-out infinite;}
.cp-gradespin i{width:30px;height:30px;}

/* result — 4-column breakdown + per-question review
   NOTE the modifier on the header. This rule used to target the bare
   .cp-dt__headrow, which is shared with the FIVE-column self-assessment
   breakdown — so that page's header was laid out in four columns, its fifth
   heading ("Band") wrapped onto a second line, and none of the headings sat
   over the data they described. Always pair a variant row with a variant
   header; never restyle the shared one. */
.cp-dt__row--4,.cp-dt__headrow--4{grid-template-columns:minmax(0,2.4fr) minmax(90px,1.5fr) 90px 116px;}
.cp-qreview{padding:10px 0;border-bottom:1px solid var(--cream-100,#f5efe4);}
.cp-qreview:last-child{border-bottom:none;}
.cp-qreview__top{display:flex;align-items:flex-start;gap:9px;}
.cp-qreview__top i{width:17px;height:17px;flex:0 0 auto;margin-top:1px;}
.cp-qreview--ok .cp-qreview__top i{color:var(--band-str,#12b886);}
.cp-qreview--no .cp-qreview__top i{color:var(--band-gap,#fa5252);}
.cp-qreview--pend .cp-qreview__top i{color:var(--band-dev,#f59f00);}
.cp-qreview__q{flex:1;font-size:.88rem;color:var(--text-primary,#33000F);}
.cp-qreview__m{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary,#6b5b52);white-space:nowrap;}
.cp-qreview__fb{margin:6px 0 0 26px;font-size:.82rem;color:#6b46c1;background:#f6f2ff;border-radius:8px;padding:7px 10px;}
.cp-qreview__fb i{vertical-align:-1px;margin-right:3px;}
.cp-qreview__ex{margin:5px 0 0 26px;font-size:.82rem;color:var(--text-secondary,#6b5b52);}
@media(prefers-reduced-motion:reduce){ .cp-gradespin{animation:none;} }

/* =========================================================================
   Gap Analysis report (v15)
   ========================================================================= */
.cp-src{display:flex;flex-direction:column;gap:6px;}
.cp-src__row{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;padding:6px 10px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:9px;background:#fff;}
.cp-src__k{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary,#6b5b52);}
.cp-src__k i{width:15px;height:15px;color:var(--orange-500,#EC4801);}
.cp-src__v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary,#33000F);}
.cp-src__v em{color:var(--greige-500,#a8977f);font-weight:500;font-style:normal;font-size:.8rem;}
.cp-src__w{font-style:normal;font-weight:800;font-size:.7rem;color:var(--orange-600,#d8410b);background:var(--orange-50,#fff3ec);border-radius:5px;padding:1px 5px;margin-left:4px;cursor:default;}

/* unsupported-role notice */
.cp-rolealert{display:flex;gap:13px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border:1px solid #f6c98a;border-left:4px solid var(--orange-500,#EC4801);border-radius:12px;background:#fff8f1;}
.cp-rolealert__icon{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--orange-100,#ffe4d1);display:flex;align-items:center;justify-content:center;color:var(--orange-600,#d8410b);}
.cp-rolealert__icon i{width:18px;height:18px;}
.cp-rolealert__body strong{display:block;font-size:.95rem;color:var(--text-primary,#33000F);margin-bottom:3px;}
.cp-rolealert__body p{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-secondary,#6b5b52);}
.cp-rolealert__body a{color:var(--orange-600,#d8410b);font-weight:700;}

/* gap → recommended LMS courses */
.cp-reccourses{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.cp-reccourse{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:12px;background:#fff;text-decoration:none;transition:border-color .12s,box-shadow .12s,transform .12s;}
.cp-reccourse:hover{border-color:var(--orange-300,#ffb38a);box-shadow:0 4px 14px rgba(236,72,1,.08);transform:translateY(-1px);}
.cp-reccourse__thumb{width:46px;height:46px;flex:0 0 auto;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange-400,#ff8a4c),var(--orange-600,#d8410b));color:#fff;font-weight:800;font-size:1.1rem;}
.cp-reccourse__thumb img{width:100%;height:100%;object-fit:cover;}
.cp-reccourse__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.cp-reccourse__body b{font-size:.9rem;color:var(--text-primary,#33000F);line-height:1.25;}
.cp-reccourse__tags{display:flex;flex-wrap:wrap;gap:4px;}
.cp-reccourse__tags em{font-style:normal;font-size:.66rem;font-weight:600;background:var(--greige-200,#efe7d8);color:var(--text-secondary,#6b5b52);padding:1px 6px;border-radius:5px;}
.cp-reccourse>i{width:16px;height:16px;color:var(--greige-500,#a8977f);flex:0 0 auto;}

/* gap-analysis feedback (1–5) */
.cp-fb__head{display:flex;align-items:flex-start;gap:12px;}
.cp-fb__icon{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:var(--orange-50,#fff3ec);display:flex;align-items:center;justify-content:center;color:var(--orange-500,#EC4801);}
.cp-fb__icon i{width:20px;height:20px;}
.cp-fb__t{margin:0;font-size:1.02rem;color:var(--text-primary,#33000F);}
.cp-fb__stars{display:flex;align-items:center;gap:5px;margin:14px 0 10px;}
.cp-fb__star{background:none;border:none;padding:2px;cursor:pointer;color:var(--greige-300,#d8cbb4);line-height:0;transition:transform .1s;}
.cp-fb__star i{width:30px;height:30px;fill:none;stroke:currentColor;}
.cp-fb__star:hover{transform:scale(1.14);}
.cp-fb__star.is-on{color:var(--orange-500,#EC4801);}
.cp-fb__star.is-on i{fill:currentColor;}
.cp-fb__scale{margin-left:10px;font-size:.86rem;font-weight:700;color:var(--orange-600,#d8410b);}
.cp-fb__comment{width:100%;max-width:520px;resize:vertical;font-family:inherit;}
.cp-fb__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;}
.cp-fb__done{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--band-str,#12b886);}
.cp-fb__done i{width:16px;height:16px;}

.cp-gapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.cp-gapcard{padding:14px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:13px;background:#fff;border-left-width:3px;}
.cp-gapcard--strength{border-left-color:var(--band-str,#12b886);}
.cp-gapcard--developing{border-left-color:var(--band-dev,#f59f00);}
.cp-gapcard--gap{border-left-color:var(--band-gap,#fa5252);}
.cp-gapcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;}
.cp-gapcard__label{font-weight:600;font-size:.9rem;color:var(--text-primary,#33000F);line-height:1.25;}
.cp-gapcard__score{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary,#33000F);}
.cp-gapcard .cp-bd__track{width:100%;display:block;height:7px;background:var(--greige-200,#efe7d8);}
.cp-gapcard .cp-bd__fill{display:block;height:100%;width:0;border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.cp-gapcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;}
.cp-gapcard__src{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--greige-500,#a8977f);cursor:help;text-align:right;}
.cp-gapcard__detail{margin:8px 0 0;font-size:.8rem;color:var(--text-secondary,#6b5b52);line-height:1.45;}

.cp-deploygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.cp-deploy{position:relative;padding:16px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:13px;background:#fff;}
.cp-deploy--best{border-color:var(--orange-400,#ff8a4d);box-shadow:0 6px 20px rgba(236,72,1,.12);background:linear-gradient(150deg,#fff,var(--orange-50,#fff3ec));}
.cp-deploy__flag{position:absolute;top:-10px;left:14px;background:var(--orange-500,#EC4801);color:#fff;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;}
.cp-deploy__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.cp-deploy__name{font-weight:700;font-size:1.02rem;color:var(--text-primary,#33000F);}
.cp-deploy__match{font-size:1.5rem;font-weight:800;color:var(--orange-600,#d8410b);}
.cp-deploy__match small{font-size:.8rem;font-weight:600;}
.cp-deploy__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0;font-size:.8rem;color:var(--text-secondary,#6b5b52);}
.cp-deploy__meta i{width:14px;height:14px;vertical-align:-2px;margin-right:3px;color:var(--orange-500,#EC4801);}
.cp-deploy__gapsh{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--greige-500,#a8977f);margin-bottom:5px;}
.cp-chip{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--greige-200,#efe7d8);color:var(--text-secondary,#6b5b52);margin:0 4px 4px 0;}

.cp-swot{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:620px){.cp-swot{grid-template-columns:1fr;}}
.cp-swot__q{padding:13px 15px;border-radius:12px;border:1px solid var(--border-subtle,#E7DFD2);}
.cp-swot__q h4{margin:0 0 8px;font-size:.9rem;display:flex;align-items:center;gap:7px;}
.cp-swot__q h4 i{width:16px;height:16px;}
.cp-swot__q ul{margin:0;padding-left:18px;font-size:.85rem;color:var(--text-secondary,#6b5b52);line-height:1.55;}
.cp-swot__q--s{background:#eafaf4;border-color:#c3ede0;} .cp-swot__q--s h4{color:#0b8a63;}
.cp-swot__q--w{background:#fff0f0;border-color:#ffd4d4;} .cp-swot__q--w h4{color:#d63333;}
.cp-swot__q--o{background:#fff6e8;border-color:#ffe4bd;} .cp-swot__q--o h4{color:#b8730b;}
.cp-swot__q--t{background:#f6f2ff;border-color:#e2d8ff;} .cp-swot__q--t h4{color:#6b46c1;}

.cp-actions{display:flex;flex-direction:column;gap:10px;}
.cp-action{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--border-subtle,#E7DFD2);border-radius:12px;background:#fff;}
.cp-action__n{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--orange-500,#EC4801);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.cp-action b{font-size:.92rem;color:var(--text-primary,#33000F);}
.cp-action p{margin:2px 0 0;font-size:.83rem;}
.cp-action .cp-band{margin-left:auto;flex:0 0 auto;}

/* =========================================================================
   Gap Analysis — richer detail (parameters, expandable dims, index) (v16)
   ========================================================================= */
.cp-paramgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.cp-paramgroup{border:1px solid var(--border-subtle,#E7DFD2);border-radius:12px;padding:12px 14px;background:var(--cream-100,#faf6ee);}
.cp-paramgroup__h{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--orange-600,#d8410b);margin-bottom:9px;}
.cp-paramgroup__h i{width:15px;height:15px;}
.cp-param{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dashed var(--border-subtle,#eadfce);font-size:.85rem;}
.cp-param:last-child{border-bottom:none;}
.cp-param__k{color:var(--text-secondary,#6b5b52);}
.cp-param__v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary,#33000F);text-align:right;overflow-wrap:anywhere;}

/* expandable dimension rows */
.cp-dim{border:1px solid var(--border-subtle,#E7DFD2);border-left-width:3px;border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff;}
.cp-dim--strength{border-left-color:var(--band-str,#12b886);}
.cp-dim--developing{border-left-color:var(--band-dev,#f59f00);}
.cp-dim--gap{border-left-color:var(--band-gap,#fa5252);}
.cp-dim__row{display:grid;grid-template-columns:18px minmax(0,2.1fr) minmax(80px,1.3fr) 44px 108px;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:13px 15px;font:inherit;transition:background .15s;}
.cp-dim__row:hover{background:var(--cream-100,#faf6ee);}
.cp-dim__label{min-width:0;font-weight:600;font-size:.94rem;color:var(--text-primary,#33000F);}
.cp-dim__detail{display:block;font-weight:400;font-size:.76rem;color:var(--greige-500,#a8977f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-dim__barwrap .cp-bd__track{width:100%;display:block;height:8px;background:var(--greige-200,#efe7d8);}
.cp-dim__barwrap .cp-bd__fill{display:block;height:100%;width:0;border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.cp-dim__score{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary,#33000F);text-align:right;}
.cp-dim__panel{padding:2px 15px 16px 15px;}
.cp-dim__why{font-size:.85rem;color:var(--text-secondary,#6b5b52);background:var(--orange-50,#fff3ec);border-radius:9px;padding:9px 12px;margin-bottom:12px;}
.cp-dim__why i{width:14px;height:14px;vertical-align:-2px;color:var(--orange-500,#EC4801);}
.cp-dim__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.cp-dim__cols{grid-template-columns:1fr;}.cp-dim__row{grid-template-columns:18px 1fr 44px;}.cp-dim__barwrap,.cp-dim__row .cp-band{display:none;}}
.cp-dim__colh{display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--greige-500,#a8977f);margin-bottom:8px;}
.cp-blend{display:grid;grid-template-columns:minmax(0,1fr) 70px 30px;gap:8px;align-items:center;margin-bottom:7px;}
.cp-blend__k{font-size:.8rem;color:var(--text-secondary,#6b5b52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-blend__k em{color:var(--greige-500,#a8977f);font-style:normal;font-size:.72rem;}
.cp-blend__bar{height:6px;border-radius:99px;background:var(--greige-200,#efe7d8);overflow:hidden;}
.cp-blend__fill{display:block;height:100%;background:linear-gradient(90deg,var(--orange-400,#ff8a4d),var(--orange-500,#EC4801));border-radius:99px;}
.cp-blend__v{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--text-primary,#33000F);}
.cp-dim__srcline{margin:8px 0 0;font-size:.76rem;color:var(--text-secondary,#6b5b52);}
.cp-srctag{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--greige-200,#efe7d8);color:var(--text-secondary,#6b5b52);padding:1px 6px;border-radius:5px;margin-right:3px;}
.cp-evid{margin:0;padding-left:16px;font-size:.83rem;color:var(--text-secondary,#6b5b52);line-height:1.55;}
.cp-dim__improve{margin-top:12px;font-size:.84rem;padding:9px 12px;border-radius:9px;background:#eafaf4;color:#0b6b4f;}
.cp-dim__improve--gap{background:#fff0f0;color:#b53232;} .cp-dim__improve--developing{background:#fff6e8;color:#a06a12;}
.cp-dim__improve i{width:14px;height:14px;vertical-align:-2px;}

/* index math */
.cp-idx{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.cp-idx__row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(90px,2fr) 44px;gap:12px;align-items:center;}
.cp-idx__k{font-size:.85rem;color:var(--text-primary,#33000F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-idx__bar{height:10px;border-radius:99px;background:var(--greige-200,#efe7d8);overflow:hidden;}
.cp-idx__fill{display:block;height:100%;border-radius:99px;}
.cp-idx__v{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--orange-600,#d8410b);}
.cp-idx__total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:10px;border-top:2px solid var(--border-subtle,#E7DFD2);font-weight:700;color:var(--text-primary,#33000F);}
.cp-idx__tv{font-size:1.3rem;font-weight:800;color:var(--orange-600,#d8410b);}

/* =========================================================================
   Gap Analysis — clinical deep-dive (self vs verified) (v17)
   ========================================================================= */
.cp-cdt{display:flex;flex-direction:column;}
.cp-cdt__headrow,.cp-cdt__row{display:grid;grid-template-columns:18px minmax(0,2fr) 120px 128px 52px 96px;gap:10px;align-items:center;}
.cp-cdt__headrow{padding:4px 12px 9px;border-bottom:1px solid var(--border-subtle,#E7DFD2);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--greige-500,#a8977f);}
.cp-cdt__headrow .cp-hbtn{margin-left:2px;}
.cp-acc + .cp-acc,.cp-cdt .cp-acc{border-bottom:1px solid var(--border-subtle,#f0e9dc);}
.cp-cdt__row{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:12px;font:inherit;transition:background .15s;}
.cp-cdt__row:hover{background:var(--cream-100,#faf6ee);}
.cp-cdt__name{min-width:0;font-weight:600;font-size:.9rem;color:var(--text-primary,#33000F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-cdt__name em{display:block;font-style:normal;font-size:.72rem;color:var(--greige-500,#a8977f);font-weight:400;}
.cp-cdt__cmp{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary,#33000F);}
.cp-cdt__mbar{flex:1;min-width:34px;height:6px;border-radius:99px;background:var(--greige-200,#efe7d8);overflow:hidden;}
.cp-cdt__mbar>span{display:block;height:100%;border-radius:99px;}
.cp-delta{font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;}
.cp-delta--up{color:var(--band-str-ink,#0b8a63);}
.cp-delta--match{color:var(--greige-500,#a8977f);}
.cp-delta--slight{color:var(--band-dev-ink,#b8730b);}
.cp-delta--over{color:var(--band-gap-ink,#d63333);}
.cp-delta--na{color:var(--greige-400,#c8b9a0);}
.cp-cdt__panel{padding:2px 12px 14px 40px;}
.cp-cdt__subhead,.cp-cdt__sub{display:grid;grid-template-columns:minmax(0,2fr) 130px 130px 48px;gap:10px;align-items:center;}
.cp-cdt__subhead{padding:7px 0;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--greige-500,#a8977f);border-bottom:1px dashed var(--border-subtle,#eadfce);}
.cp-cdt__sub{padding:8px 0;border-bottom:1px solid var(--cream-100,#f5efe4);font-size:.84rem;}
.cp-cdt__sub:last-child{border-bottom:none;}
.cp-cdt__subname{color:var(--text-primary,#33000F);min-width:0;}
.cp-cdt__scell{color:var(--text-secondary,#6b5b52);font-variant-numeric:tabular-nums;}
.cp-cdt__scell em{font-size:.74rem;}
@media(max-width:680px){
  .cp-cdt__headrow,.cp-cdt__row{grid-template-columns:18px 1fr 60px 44px;}
  .cp-cdt__row .cp-cdt__cmp:first-of-type,.cp-cdt__headrow span:nth-child(3),.cp-cdt__row .cp-band{display:none;}
  .cp-cdt__subhead,.cp-cdt__sub{grid-template-columns:minmax(0,1.6fr) 1fr 48px;}
  .cp-cdt__subhead span:nth-child(2){display:none;}
}

/* ============================================================
   OTP cooldown countdown (v22)
   ============================================================ */
/* The button is the countdown. `tabular-nums` keeps the digits from jittering as the
   number changes, and the softened opacity says "waiting", not "broken" — .cp-btn:disabled
   alone reads as an error state. */
.cp-btn.is-waiting {
  opacity: .72;
  cursor: progress;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ============================================================
   Nav v2 — journey-grouped dropdowns + account menu.
   APPEND to candidates/static/candidate/css/candidate.css (after line 900).
   Every rule below is written to win on source order against the existing
   .cp-nav block at lines 93-104 and the @media (max-width:900px) block at
   lines 226-235. No new design tokens are introduced; where a token is used
   that is defined in cms/static/cms/design/tokens/ but NOT re-emitted by the
   runtime theme CSS, a literal fallback follows it, matching the convention
   already used at candidate.css:365, :387, :459.
   ============================================================ */

/* ---- 1. The bar: take backdrop-filter OFF the header -------------------
   candidate.css:93 puts `backdrop-filter` on .cp-nav itself. That is the
   single most dangerous thing for this design: a non-none backdrop-filter
   makes .cp-nav a containing block for absolutely-positioned descendants AND
   a stacking context, and WebKit additionally clips descendants to the
   filtered element's bounds — which is exactly how dropdown panels end up
   sliced off at the 66px line. Moving the frost to a ::after pseudo keeps the
   look identical and removes the hazard entirely: .cp-nav becomes an ordinary
   sticky, unfiltered box, and the panels are contained by .cp-nav__group.

   z-index, stated exactly:
     .cp-nav            70  (was 40) — sticky, forms the stacking context
     .cp-nav::after      0  — the frosted plate, painted first
     .cp-nav__inner      1  — everything visible in the bar
     .cp-nav__mobile     1  — the drawer, above the plate
     .cp-nav__menu      50  — panels, inside .cp-nav's context
     .cp-acct__menu     50
   Panels do not compete with page content directly; the BAR's 70 does that
   for them. 70 was chosen to clear .cp-tip (candidate.css:291, z-index 60),
   which is an upward-opening page tooltip that could otherwise paint over an
   open panel. The fixed .cp-tip2 (candidate.css:612, z-index 9999) still wins,
   which is correct — it is pointer-events:none and cannot steal hover. */
.cp-nav { z-index: 70; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cp-nav::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(251, 249, 243, .9);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
}
.cp-nav__inner, .cp-nav__mobile { position: relative; z-index: 1; }

/* ---- 2. Layout of the bar ----
   `gap` gives space-between a floor, so an over-wide bar butts up rather than
   letting the wordmark touch the first pill. flex:none on the wordmark and the
   account cluster means only the links row could ever be squeezed — and it
   never is, because it is display:none below 1000px. */
.cp-nav__inner { gap: 12px; }
.cp-nav__inner > .cp-wm { flex: none; }
.cp-nav__links { align-self: stretch; flex: 0 1 auto; min-width: 0; }
.cp-nav__right { align-self: stretch; flex: none; }

/* THE fix for the reported bug. Three labels wrap today because .cp-nav__link
   (candidate.css:96) never says they must not. Grouping reduces the pressure;
   this is what makes wrapping impossible at any width. */
.cp-nav__link { white-space: nowrap; transition: background .15s ease, color .15s ease; }

/* ---- 3. The trigger: a .cp-nav__link that happens to be a <button> ----
   No `font:` shorthand — it is a later rule than .cp-nav__link and would wipe
   the .9375rem/600 that rule sets. Each property is restated longhand instead,
   so this is immune to source order. */
.cp-nav__trigger {
  margin: 0; border: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.6;
}

/* ---- 4. Groups ----
   align-self:stretch makes the group 66px tall — the full height of the bar.
   That does two things: the hoverable column runs from the top of the bar down
   to the panel (so diagonal cursor travel never leaves the group), and
   top:calc(100% + 8px) on the panel measures from the BAR's bottom edge, so
   every panel opens on the same y-line 8px below the bar rather than each one
   hanging off its own pill. */
.cp-nav__group { position: relative; display: flex; align-items: center; align-self: stretch; }

/* The pill looks held-open whenever its panel is, by any of the three routes. */
.cp-nav__group:hover > .cp-nav__trigger,
.cp-nav__group:focus-within > .cp-nav__trigger,
.cp-nav__group.is-open > .cp-nav__trigger { color: var(--orange-600); background: var(--orange-50); }
/* ...but never at the cost of the active state. 0,3,0 beats the 0,2,0 above.
   orange-700 rather than the existing orange-600: orange-600 on orange-100 is
   3.9:1, which fails AA at 15px/600. orange-700 on orange-100 is 5.1:1. */
.cp-nav__group > .cp-nav__trigger.is-active,
.cp-nav__group > .cp-nav__trigger.is-active:hover { color: var(--orange-700, #b23300); background: var(--orange-100); }

/* ---- 5. The caret ----
   Wrapped in a <span> in the markup rather than classed on the <i> directly:
   lucide replaces the <i> with an <svg> and attribute carry-over is not
   something to bet a layout on. Sizing targets both forms, at 0,2,0 — equal to
   the existing `.cp-nav__link [data-lucide] { width:17px }` at candidate.css:99
   and later in the file, so 14px wins. */
.cp-nav__caret { display: inline-flex; align-items: center; margin-left: -1px; opacity: .55; transition: transform .18s ease; }
.cp-nav__caret [data-lucide], .cp-nav__caret svg { width: 14px; height: 14px; }
.cp-nav__group:hover .cp-nav__caret,
.cp-nav__group:focus-within .cp-nav__caret,
.cp-nav__group.is-open .cp-nav__caret,
.cp-acct:hover .cp-nav__caret,
.cp-acct:focus-within .cp-nav__caret,
.cp-acct.is-open .cp-nav__caret { transform: rotate(180deg); }

/* ---- 6. Panels ----
   Hidden with opacity + visibility, never display:none, so they can fade, are
   removed from the tab order when closed (visibility:hidden is not focusable),
   and are not phantom hover targets. */
.cp-nav__menu,
.cp-acct__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  width: 296px; padding: 6px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* Closing: 50ms of grace, then a 120ms fade; visibility flips only after
     both (0s delayed 220ms), so the panel stays hit-testable while it fades. */
  transition: opacity .12s ease .05s, transform .12s ease .05s, visibility 0s linear .22s;
}

/* THE HOVER BRIDGE.
   The panel sits 8px below the bar. This pseudo covers that 8px gap, plus 1px
   of overlap into the panel, across the panel's FULL width — so a cursor
   moving diagonally from the middle of the trigger to the far corner of the
   panel is over the bridge the whole way. It works because :hover matches an
   element whose DESCENDANT is under the pointer regardless of geometry: the
   bridge is inside the panel, which is inside the group, so crossing it keeps
   .cp-nav__group:hover true even though the cursor is outside the group's box.
   While the panel is closed it inherits visibility:hidden, so the bridge is
   completely inert and cannot open a menu the user never aimed at.
   DO NOT add `overflow` to .cp-nav__menu — it would clip this pseudo at
   top:-9px and the bridge silently stops working. The panels hold at most
   three rows (~200px) and never need to scroll. */
.cp-nav__menu::before,
.cp-acct__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }

/* All three open routes feed one selector list — none depends on another. */
.cp-nav__group:hover > .cp-nav__menu,
.cp-nav__group:focus-within > .cp-nav__menu,
.cp-nav__group.is-open > .cp-nav__menu,
.cp-acct:hover > .cp-acct__menu,
.cp-acct:focus-within > .cp-acct__menu,
.cp-acct.is-open > .cp-acct__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* Escape was pressed and focus was returned to the trigger, which keeps
   :focus-within true. This suppresses the panel until focus or the pointer
   leaves, or the trigger is clicked again. Equal specificity to the open
   rules, so it MUST stay after them. */
.cp-nav__group.is-escaped > .cp-nav__menu,
.cp-acct.is-escaped > .cp-acct__menu { opacity: 0; visibility: hidden; transform: translateY(6px); transition: none; }

/* Right-edge anchoring. An explicit class, not :last-child — :last-child would
   silently move to whatever group is added next. Career's panel spans
   x 600-872 at a 1024px viewport; left-anchored it would end at 1006px, 18px
   from the edge, which reads as a mistake even when it technically fits. */
.cp-nav__group--end > .cp-nav__menu { left: auto; right: 0; }
.cp-acct__menu { left: auto; right: 0; width: 312px; padding: 8px; }

/* ---- 7. Panel rows: icon chip, title, one-line description ---- */
.cp-nav__item { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: var(--radius-sm); color: var(--text-primary); }
.cp-nav__item:hover { background: var(--orange-50); text-decoration: none; }
.cp-nav__item.is-active { background: var(--orange-100); }
.cp-nav__item-ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--greige-300); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cp-nav__item-ic [data-lucide], .cp-nav__item-ic svg { width: 17px; height: 17px; }
.cp-nav__item:hover .cp-nav__item-ic { background: var(--orange-100); color: var(--orange-600); }
.cp-nav__item.is-active .cp-nav__item-ic { background: var(--surface-card, #fff); color: var(--orange-600); }
.cp-nav__item-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.cp-nav__item-tx strong { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.cp-nav__item-tx small { font-size: .775rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.cp-nav__item.is-active .cp-nav__item-tx strong { color: var(--orange-700, #b23300); }

/* Sign out. The obvious treatment — danger-red text on red-100 — is 3.9:1 and
   fails AA, so the row carries its warning in the ICON (danger on red-100 is
   3.9:1, over the 3:1 bar for non-text) and keeps ink-dark text. */
.cp-nav__item--danger .cp-nav__item-ic { color: var(--color-danger, #d92d20); }
.cp-nav__item--danger:hover { background: var(--red-100, #fbe0dd); }
.cp-nav__item--danger:hover .cp-nav__item-ic { background: var(--surface-card, #fff); color: var(--color-danger, #d92d20); }

/* ---- 8. Focus ----
   The soft --focus-ring alone is rgba(236,72,1,.40): about 1.7:1 against the
   cream bar, which fails WCAG 2.2 SC 1.4.11. A solid 2px --orange-500 core
   (3.6:1) carries the indicator; the halo stays for the look. */
.cp-nav__trigger:focus-visible,
.cp-acct__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--orange-500), 0 0 0 5px var(--focus-ring); }
.cp-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--orange-500); }

/* Visually hidden, still in the accessibility tree. */
.cp-nav__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- 9. Account trigger ---- */
.cp-acct { position: relative; display: flex; align-items: center; align-self: stretch; }
.cp-acct__trigger {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 5px 9px 5px 5px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-pill, 999px);
  -webkit-appearance: none; appearance: none;
  font-family: inherit; cursor: pointer;
}
.cp-acct:hover .cp-acct__trigger,
.cp-acct:focus-within .cp-acct__trigger,
.cp-acct.is-open .cp-acct__trigger { background: var(--surface-card, #fff); border-color: var(--border-subtle); box-shadow: var(--shadow-xs, 0 1px 2px rgba(51,0,15,.06)); }
.cp-acct__trigger .cp-avatar { width: 34px; height: 34px; font-size: .8rem; }
.cp-acct__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.cp-acct__name { max-width: 120px; font-size: .875rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-acct__hint { font-size: .71rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* ---- 10. Account panel ---- */
.cp-acct__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; }
.cp-acct__head .cp-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
.cp-acct__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cp-acct__who strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-acct__who small { font-size: .775rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-acct__completion { padding: 2px 10px 12px; }
.cp-acct__completion-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: .775rem; font-weight: 600; color: var(--text-secondary); }
.cp-acct__completion-top strong { font-size: .85rem; font-weight: 700; color: var(--orange-700, #b23300); }
.cp-acct__bar { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--greige-300); overflow: hidden; }
.cp-acct__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--orange-500); }
.cp-acct__sep { height: 1px; margin: 8px 4px; background: var(--border-subtle); }

/* ---- 11. Mobile drawer additions ---- */
.cp-nav__mlabel { padding: 12px 12px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.cp-nav__msep { height: 1px; margin: 8px 0; background: var(--border-subtle); }

/* ---- 12. Responsive ----
   Measured against .cp-container (candidate.css:11):
   content width = min(1160, vw) - 2 x clamp(16px, 4vw, 40px).
   Bar contents, Mona Sans 600: wordmark 140, five pills + gaps 672,
   account pill 200 with name / 80 without, plus 2 x 12px inner gap. */

/* >=1181px  content 1080.  Need 140+672+200+24 = 1036. Slack 44px. */

/* 1081-1180: drop the name and completion hint; the avatar still identifies
   the account and the .cp-nav__sr label keeps its accessible name intact.
   Need 140+672+80+24 = 916 against content 1001-1080. Slack 85px+. */
@media (max-width: 1180px) {
  .cp-acct__meta { display: none; }
}

/* 1001-1080: tighten the wordmark and the pills rather than let anything
   touch. Need ~873 against content 921-1000. Slack 48px+. */
@media (max-width: 1080px) {
  .cp-nav .cp-wm { font-size: 20px; }
  .cp-nav__links { gap: 3px; }
  .cp-nav__links .cp-nav__link { padding: 8px 9px; }
}

/* <=1000px: the drawer takes over. This deliberately fires 100px earlier than
   the existing @media (max-width:900px) block at candidate.css:226. At a 901px
   viewport that old breakpoint would still be showing the five pills in 829px
   of content while they need 873 — a real overflow band the grouping alone does
   not fix. These rules restate the drawer's three declarations at the wider
   width; being later in the file at equal specificity, they win. The 900px
   block is left untouched, and candidate.js initMobileNav() is unchanged. */
@media (max-width: 1000px) {
  .cp-nav__links { display: none; }
  .cp-nav__toggle { display: inline-flex; }
  .cp-nav__mobile.is-open { display: flex; flex-direction: column; gap: 4px; padding: 12px clamp(1rem, 4vw, 2.5rem); background: var(--cream-100); border-bottom: 1px solid var(--border-subtle); }
  .cp-nav__mobile.is-open .cp-nav__link { padding: 12px; }
  .cp-acct .cp-nav__caret { display: none; }
  .cp-acct__trigger { padding: 3px; }
}

/* <=520px: the account panel is right-anchored to a trigger that is itself
   ~54px from the right edge, so a fixed 312px would cross the left edge of a
   375px phone. 375 - 84 = 291px. */
@media (max-width: 520px) {
  .cp-acct__menu { width: min(312px, calc(100vw - 84px)); }
}

/* ---- 13. Reduced motion. Last, so it wins.
   Every end state is fully legible with zero animation, which is also the
   answer to this project's throttled requestAnimationFrame: nothing here is
   driven by rAF, and losing the tween never loses the menu. ---- */
@media (prefers-reduced-motion: reduce) {
  .cp-nav__menu, .cp-acct__menu, .cp-nav__caret, .cp-nav__link, .cp-nav__item-ic, .cp-acct__trigger { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE GAP, REDUCED BY TRAINING — the reclaim vial.

   Appended to candidates/static/candidate/css/candidate.css.
   Bump the cache-buster at candidates/templates/candidate/base.html:9
   from ?v=22 to ?v=23.

   cp-* ONLY. Consumed exclusively by candidate/gap_analysis.html.
   Deliberately reuses the learning-plan vial grammar (solid -> hatched ->
   striped, learning_plan.css:172-182) so the plan and the report read as
   one system. Every colour goes through a var() with a literal fallback,
   because the palette is generated from the Theme model at runtime
   (cms/theming.py:44-86) and Theme.active() may be None.

   NOTHING here styles the journey strip, the player chip or the course
   ribbon — those live in Tailwind shells and carry their own inline
   var() values, per the no-mixing rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Legend: define the three inks once, above the deep-dive table ────── */
.cp-gaplegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px;
  font-size: .78rem; line-height: 1.5; color: var(--text-secondary, #6b5b52); }
.cp-gaplegend > span { display: inline-flex; align-items: center; }
.cp-gaplegend__sw { display: inline-block; width: 18px; height: 10px; flex: 0 0 18px;
  border-radius: 3px; margin-right: 6px; }
.cp-gaplegend__sw--measured { background: var(--band-str-ink, #0b8a63); opacity: .85; }
.cp-gaplegend__sw--zone {
  background: repeating-linear-gradient(135deg,
    var(--greige-400, #e3d7c2) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--greige-400, #dccfb8); }
.cp-gaplegend__sw--gain {
  background: repeating-linear-gradient(135deg,
    var(--orange-500, #ec4801) 0 4px, var(--orange-300, #f6a878) 4px 8px); }

/* ── The vial. Spans the sub-row grid as a SECOND line, so the four
      existing columns (name / self / verified / delta) and their
      3-column mobile variant (candidate.css:885) are untouched. ──────── */
.cp-cdt__sub--train { row-gap: 4px; }
.cp-reclaim { grid-column: 1 / -1; display: flex; align-items: center;
  gap: 12px; padding: 2px 0 10px; }

.cp-reclaim__track { position: relative; flex: 1 1 auto; min-width: 120px;
  height: 12px; border-radius: 999px; overflow: visible;
  background: var(--cream-100, #f4ede0);
  box-shadow: inset 0 0 0 1px var(--greige-400, #eadfce); }

/* MEASURED — solid, band-coloured, never moves with study. */
.cp-reclaim__now { position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px 0 0 999px; opacity: .9; }

/* GROUND TO STRENGTH — hatched. overflow:hidden is load-bearing: it is what
   makes the reclaim overlay physically unable to extend the measured fill. */
.cp-reclaim__zone { position: absolute; top: 0; bottom: 0; overflow: hidden;
  border-radius: 0 999px 999px 0;
  background: repeating-linear-gradient(135deg,
    var(--greige-400, #e3d7c2) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--greige-400, #dccfb8); }

/* RECLAIMED BY TRAINING — striped, never solid. The stripe IS the claim
   that this is pencilled in, not inked. */
.cp-reclaim__gain { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(135deg,
    var(--orange-500, #ec4801) 0 4px, var(--orange-300, #f6a878) 4px 8px);
  transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* The 80-point strength line. */
.cp-reclaim__line { position: absolute; left: 80%; top: -3px; bottom: -3px;
  width: 2px; background: var(--brown-900, #2d1f16); opacity: .55; }

/* VERIFIED — the only ink employers see as measured. */
.cp-reclaim__ver { position: absolute; top: 50%; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff;
  border: 3px solid var(--band-str-ink, #0b8a63); box-sizing: border-box; }

/* ── The figure beside the bar ─────────────────────────────────────────── */
.cp-reclaim__fig { flex: 0 0 auto; font-size: .76rem; white-space: nowrap;
  color: var(--text-secondary, #6b5b52); font-variant-numeric: tabular-nums; }
.cp-reclaim__fig b { color: var(--orange-600, #d8410b); font-size: .84rem; }
.cp-reclaim__fig em { font-style: normal; }

.cp-reclaim__go { display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto; font-size: .76rem; font-weight: 700; white-space: nowrap;
  color: var(--orange-600, #d8410b); }
.cp-reclaim__go:hover { text-decoration: underline; }
.cp-reclaim__go i { width: 13px; height: 13px; }

/* Domain rollup chip — lives inside the existing name cell, so the
   collapsed grid keeps its column template. */
.cp-reclaim__chip { display: inline-block; margin-left: 8px; font-size: .66rem;
  font-weight: 800; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--orange-100, rgba(236, 72, 1, .12));
  color: var(--orange-600, #d8410b); }

/* Deep-link landing flash (from a course ribbon's #sub-<id>). The resting
   state is a plain row; the class is added and removed by JS only. */
.cp-cdt__sub.is-linked { animation: cp-reclaim-flash 2.4s ease-out 1;
  border-radius: 8px; }
@keyframes cp-reclaim-flash {
  0%, 55% { background: var(--orange-100, rgba(236, 72, 1, .14)); }
  100%    { background: transparent; }
}

/* ── Narrow screens: the bar takes its own line, the figure and link
      sit under it. Nothing is hidden — the figure IS the display. ─────── */
@media (max-width: 760px) {
  .cp-reclaim { flex-wrap: wrap; gap: 8px 12px; }
  .cp-reclaim__track { flex-basis: 100%; height: 14px; }
  .cp-reclaim__fig { white-space: normal; }
}

/* ── Reduced motion: the server-rendered width is already correct, so this
      simply removes the growth. The [data-w] script (gap_analysis.html:354)
      has its own prefers-reduced-motion early-out that skips the re-zero. ─ */
@media (prefers-reduced-motion: reduce) {
  .cp-reclaim__gain { transition: none; }
  .cp-cdt__sub.is-linked { animation: none;
    background: var(--orange-100, rgba(236, 72, 1, .12)); }
}

/* ── Print / high-contrast fallback: stripes can vanish on a mono printer,
      so give the reclaim a visible outline that survives. ──────────────── */
@media print {
  .cp-reclaim__gain { outline: 1.5px solid #000; outline-offset: -1.5px; }
  .cp-reclaim__go { display: none; }
}

/* ============================================================
   Breakdown tables on a narrow screen
   ============================================================
   The desktop grid has 254px of fixed columns plus gaps. On a 375px phone
   that leaves the name column — minmax(0, 2.3fr), so free to shrink to
   zero — with no width at all, and `text-overflow: ellipsis` then hid the
   domain name completely. The table rendered as unlabelled bars.

   Below 760px each row becomes a small card instead: the name on its own
   line, the bar full width, and the three figures on a meta row that
   carries its own labels. The header row is hidden there, because the
   labels have moved inline. */
@media (max-width: 760px) {
  .cp-dt__headrow { display: none; }

  /* Grid areas rather than a wrapper element, so the markup is untouched and
     both the four- and five-column tables reflow from the same rules. */
  .cp-dt__row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "name name name" "bar bar bar" "score cov band";
    gap: 6px 14px;
    padding: 14px;
    border-bottom: 1px solid var(--border-subtle, #E7DFD2);
    align-items: center;
  }
  .cp-dt__row--4 {
    grid-template-columns: auto 1fr;
    grid-template-areas: "name name" "bar bar" "score band";
  }
  .cp-dt__c--name  { grid-area: name; }
  .cp-dt__c--bar   { grid-area: bar; }
  .cp-dt__c--score { grid-area: score; }
  .cp-dt__c--cov   { grid-area: cov; }
  .cp-dt__c--band  { grid-area: band; justify-self: end; }

  .cp-dt__nm { white-space: normal; overflow: visible; font-size: .95rem; }

  /* The figures lose their column headings here, so they carry their own. */
  .cp-dt__c--score, .cp-dt__c--cov {
    display: inline-flex; align-items: baseline; gap: 5px; text-align: left;
  }
  .cp-dt__c--score::before { content: 'Avg'; }
  .cp-dt__c--cov::before   { content: 'Rated'; }
  .cp-dt__c--score::before, .cp-dt__c--cov::before {
    font-size: .62rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--greige-500, #a8977f);
  }
}