/* career.css — Career Planner styles
 * Terminal aesthetic matching the rest of CyberStudy.
 * Color palette uses the same CSS variables as styles.css.
 */

.cp-page {
  padding: 24px 28px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;            /* per project mobile-viewport gotcha rule */
  overflow-x: hidden;      /* hard stop on any horizontal overflow from descendants */
}
@media (max-width: 1024px) {
  /* Force the page wrapper to viewport width on mobile/tablet so no
   * descendant (esp. the horizontal swipe strip) can drag it wider. */
  .cp-page {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Every direct descendant of cp-page must also constrain to viewport.
   * The horizontal scroll behavior on .cp-grid-scroll is preserved
   * because it's overflow-x: auto inside this constrained parent. */
  .cp-page > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Catalog: fill the main content area so the grid can scroll inside the
 * page rather than the page scrolling. Mirrors the cert-chooser pattern.
 * Achieved by making .cp-catalog a flex column that fills the parent (a
 * relatively-positioned wrapper inside main).
 *
 * NB: cp-page is the outer wrapper used by all 3 sub-views (catalog,
 * detail, compare). We only want the constrained-height behavior on the
 * catalog — detail and compare keep their natural page flow. The fix is
 * applied via .cp-page:has(.cp-catalog) so it scopes cleanly. */
.cp-page:has(.cp-catalog) {
  /* Natural page flow: the catalog grows with its content and the PAGE
   * scrolls — matching the cert chooser. (Previously height-capped to
   * 100vh-130px + flex column, which forced a cramped embedded inner
   * scroll inconsistent with Certifications.) */
  padding-top: 16px;
  padding-bottom: 8px;
}
.cp-catalog {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;        /* prevent intrinsic-min-content from expanding parent */
  width: 100%;
}
@media (max-width: 1024px) {
  /* Mobile + tablet: don't lock to viewport. Career cards are tall (stats
   * row, cert chips, click hint, compare button) — if we cap at 100vh on
   * mobile, the horizontal swipe strip has too little vertical room and
   * cards clip at the bottom. Let the page scroll naturally; cards still
   * scroll horizontally inside their own container. */
  .cp-page:has(.cp-catalog) {
    height: auto;
  }
  .cp-catalog {
    min-height: auto;
  }
  /* On mobile, the .cp-grid-scroll has width: max-content INSIDE (for the
   * horizontal card strip) which could expand its flex parent. Constrain
   * the scroll container itself to viewport width so siblings (disclaimer,
   * compare bar, footer) don't get dragged wider. */
  .cp-grid-scroll {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  /* Belt-and-suspenders: explicitly cap header content too */
  .cp-catalog,
  .cp-catalog-head,
  .cp-catalog-head h1,
  .cp-catalog-head p,
  .cp-disclaimer-block,
  .cp-salary-disclaimer,
  .cp-compare-bar,
  .cp-catalog-footer {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
}

/* Page headers shared across catalog/detail/compare */
.cp-h1 {
  font-size: 26px;
  font-weight: 600;
  color: var(--accent-cyan, #00bcd4);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.cp-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cp-sub {
  font-size: 14px;
  color: var(--fg-dim, var(--fg));
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 720px;
}
.cp-paragraph {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 12px;
}

.cp-back-btn { margin-bottom: 14px; }
.cp-section { margin: 28px 0; }

/* Salary disclaimer */
.cp-disclaimer-block {
  margin: 0 0 18px;
  padding: 8px 12px;
  background: rgba(255, 193, 7, 0.05);
  border-left: 3px solid var(--accent-amber, #ffc107);
  border-radius: 0 3px 3px 0;
}
.cp-salary-disclaimer {
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

/* ══════ CATALOG (grid of cards) ══════ */
.cp-catalog-head { margin-bottom: 12px; flex-shrink: 0; }
.cp-catalog .cp-disclaimer-block { flex-shrink: 0; }
.cp-catalog .cp-compare-bar { flex-shrink: 0; }
.cp-catalog .cp-catalog-footer { flex-shrink: 0; padding-top: 10px; margin-top: 8px; }

.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* ═══ Career-grid scroll container ═══
   Mirrors cs-grid-scroll on the cert chooser.
   Laptop+ (>1024px): vertical scroll inside the remaining viewport height
   Mobile/tablet (≤1024px): horizontal swipe strip

   IMPORTANT — flex+min-width gotcha:
   This container holds children with `width: max-content` on mobile (the
   horizontal card strip). Without `min-width: 0`, its intrinsic content
   width leaks up through the flex chain, makes the page wider than the
   viewport, and Chrome on Android auto-inflates the reported viewport —
   which prevents @media (max-width: 600px) from firing. See project note
   on the mobile viewport gotcha.
*/
.cp-grid-scroll {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  min-width: 0;        /* critical — prevents intrinsic content width leak */
  max-width: 100%;
}
@media (min-width: 1025px) {
  .cp-grid-scroll {
    /* Page-scroll (no embedded inner scroll) to match the cert chooser. */
    overflow: visible;
    padding: 12px 4px;
  }
  .cp-grid-scroll::-webkit-scrollbar { width: 8px; }
  .cp-grid-scroll::-webkit-scrollbar-track { background: var(--input); border-radius: 4px; }
  .cp-grid-scroll::-webkit-scrollbar-thumb {
    background: var(--border-hi);
    border-radius: 4px;
  }
  .cp-grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan, #00bcd4); }

  /* Inside the scroll area, the grid keeps its responsive column layout */
  .cp-grid-scroll .cp-grid {
    margin-bottom: 0;
  }
}
@media (max-width: 700px) {
  /* Mobile only: horizontal swipe strip. Above 700px the desktop grid
   * (auto-fill minmax 310px) handles 2-3 cards per row with proper card
   * growth so they fill the available width — no asymmetric right margin. */
  .cp-grid-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 16px;
    scrollbar-width: none;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
  }
  .cp-grid-scroll::-webkit-scrollbar { display: none; }
  .cp-grid-scroll .cp-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    margin: 0;
    grid-template-columns: none;
  }
  .cp-grid-scroll .cp-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    min-height: 340px;
    min-width: 0;
  }
}

.cp-card {
  background: var(--bg-card, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;  /* positioning context for .cs-card-onpath-badge (absolute) */
}
.cp-card:hover {
  border-color: var(--accent-cyan, #00bcd4);
  transform: translateY(-1px);
}
.cp-card:focus-visible {
  outline: none;
  border-color: var(--accent-cyan, #00bcd4);
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.3);
}
.cp-card.locked { opacity: 0.92; }
.cp-card.in-compare {
  border-color: var(--accent-cyan, #00bcd4);
  background: rgba(0, 188, 212, 0.05);
}
.cp-card.is-enrolled { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.cp-card-enrolled-badge {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  padding: 2px 8px; border-radius: 4px;
  background: var(--green); color: var(--bg, #0a0e0b);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}

.cp-card-hint {
  font-size: 12px;
  color: var(--fg-mute);
  font-style: italic;
  flex: 1;
}
.cp-card:hover .cp-card-hint {
  color: var(--accent-cyan, #00bcd4);
}

.cp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;   /* both the "Studying" + "On your path" badges wrap inside the card instead of overflowing its right edge */
  row-gap: 6px;
}
.cp-card-icon { font-size: 22px; }
.cp-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
}
.cp-card-lock {
  font-size: 14px;
  color: var(--fg-mute);
  cursor: help;
}

.cp-card-tagline {
  font-size: 13.5px;
  color: var(--fg-dim, var(--fg));
  line-height: 1.55;
  margin: 0;
  min-height: 40px;
}

.cp-card-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cp-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.cp-stat-label {
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.cp-stat-val {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cp-card-certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cp-certs-label {
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.cp-cert-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 11px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.02);
  font-family: inherit;
}
.cp-cert-chip.missing {
  color: var(--fg-mute);
  border-style: dashed;
}
.cp-cert-chip.optional { opacity: 0.7; font-style: italic; }
.cp-cert-chip.preferred {
  border-color: var(--accent-cyan, #00bcd4);
  color: var(--accent-cyan, #00bcd4);
}

.cp-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.cp-card-actions .btn { flex: 1; }
.cp-compare-toggle {
  border: 1px solid var(--accent-cyan, #00bcd4) !important;
  color: var(--accent-cyan, #00bcd4) !important;
  font-weight: 600;
}
.cp-compare-toggle:hover { background: rgba(0,188,212,0.08) !important; }
.cp-compare-toggle.active {
  background: var(--accent-cyan, #00bcd4) !important;
  color: var(--bg, #0a0e0b) !important;
}

/* Sticky compare bar */
.cp-compare-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg, #0d1418);
  border: 1px solid var(--accent-cyan, #00bcd4);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.cp-compare-bar-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cyan, #00bcd4);
}
.cp-compare-bar-hint {
  font-size: 12px;
  color: var(--fg-mute);
  flex: 1;
}

.cp-catalog-footer {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

/* ══════ DETAIL ══════ */
.cp-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.cp-detail-icon {
  font-size: 36px;
  width: 50px;
  text-align: center;
}

.cp-lock-banner {
  border: 1px solid var(--accent-amber, #ffc107);
  background: rgba(255, 193, 7, 0.06);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
.cp-lock-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-amber, #ffc107);
  margin-bottom: 6px;
}
.cp-lock-banner-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 12px;
}

/* Start-banner: shown on unlocked career detail pages.
 * Three states:
 *   .fresh      — user hasn't enrolled in any path yet (cyan accent)
 *   .switching  — user is enrolled in a different path (amber accent)
 *   .enrolled   — user is enrolled in THIS path (green accent) */
.cp-start-banner {
  border: 1px solid var(--cyan);
  background: rgba(0, 188, 212, 0.06);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
.cp-start-banner.switching {
  border-color: var(--accent-amber, #ffc107);
  background: rgba(255, 193, 7, 0.06);
}
.cp-start-banner.enrolled {
  border-color: var(--green);
  background: rgba(0, 255, 102, 0.06);
}
.cp-start-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 6px;
}
.cp-start-banner.switching .cp-start-banner-title { color: var(--accent-amber, #ffc107); }
.cp-start-banner.enrolled  .cp-start-banner-title { color: var(--green); }
.cp-start-banner-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 12px;
}

.cp-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  /* Tablet: 2-column grid so labels and numbers stay readable */
  .cp-detail-stats { grid-template-columns: repeat(2, 1fr); }
}
.cp-stat-big {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card, transparent);
}
.cp-stat-big-label {
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cp-stat-big-val {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-cyan, #00bcd4);
  font-variant-numeric: tabular-nums;
}
.cp-stat-big-sub {
  font-size: 11px;
  color: var(--fg-mute);
}

/* Cert sequence (ordered list) */
.cp-cert-seq {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-cert-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card, transparent);
}
.cp-cert-step.missing { opacity: 0.7; border-style: dashed; }
.cp-cert-step.optional { opacity: 0.85; }

.cp-cert-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--accent-cyan, #00bcd4);
  border-radius: 50%;
  color: var(--accent-cyan, #00bcd4);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cp-cert-step-body { flex: 1; }
.cp-cert-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-tag-optional, .cp-tag-have, .cp-tag-requested {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.cp-tag-optional {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-mute);
  border: 1px solid var(--border);
}
.cp-tag-have {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid var(--green);
  font-weight: 600;
}
/* "Not planned · Request now" — interactive button on certs not yet built.
 * Cyan-bordered to read as actionable. Hover state intensifies. After click,
 * swaps to the static .cp-tag-requested checkmark (green) for the rest of
 * the session — feedback that the request was received. */
.cp-tag-request {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  background: rgba(0, 188, 212, 0.08);
  color: var(--accent-cyan, #00bcd4);
  border: 1px solid var(--accent-cyan, #00bcd4);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.cp-tag-request:hover {
  background: rgba(0, 188, 212, 0.18);
}
.cp-tag-requested {
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid var(--green);
}
/* Cert step in default-sequence list, when the user already owns this cert */
.cp-cert-step.have {
  border-left: 3px solid var(--green);
  background: rgba(0, 255, 102, 0.03);
}
.cp-cert-step.have .cp-cert-step-num {
  color: var(--green);
  font-weight: 700;
}
/* Have-summary line: shown at top of cert sequence when the user owns at
 * least one cert in this path. Adds quick context for browsing-before-enrolling. */
.cp-have-summary {
  font-size: 13px;
  color: var(--green);
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(0, 255, 102, 0.05);
  border-left: 3px solid var(--green);
  border-radius: 0 3px 3px 0;
}
.cp-cert-step-meta {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-top: 2px;
}
.cp-cert-step-blurb {
  font-size: 13px;
  color: var(--fg-dim, var(--fg));
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Pros / Cons / Fit blocks */
.cp-procon, .cp-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cp-pros, .cp-cons, .cp-fit-block {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card, transparent);
}
.cp-pros { border-left: 3px solid var(--accent-green, #4caf50); }
.cp-cons { border-left: 3px solid var(--accent-red, #f44336); }
.cp-fit-love { border-left: 3px solid var(--accent-cyan, #00bcd4); }
.cp-fit-hate { border-left: 3px solid var(--fg-mute); }
.cp-procon-label, .cp-fit-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.cp-pros ul, .cp-cons ul, .cp-fit-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cp-pros li, .cp-cons li, .cp-fit-block li {
  font-size: 13px;
  line-height: 1.55;
  padding: 4px 0;
  color: var(--fg);
}

/* Roles & salary */
.cp-roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-role {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card, transparent);
}
.cp-role-entry { border-left: 3px solid var(--accent-green, #4caf50); }
.cp-role-mid { border-left: 3px solid var(--accent-cyan, #00bcd4); }
.cp-role-senior { border-left: 3px solid var(--accent-amber, #ffc107); }

.cp-role-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cp-role-tier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  color: var(--fg-mute);
  font-weight: 600;
}
.cp-role-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.cp-role-summary {
  font-size: 13px;
  color: var(--fg-dim, var(--fg));
  line-height: 1.5;
  margin: 0 0 8px;
}
.cp-role-salary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.cp-role-salary-median {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-cyan, #00bcd4);
  font-variant-numeric: tabular-nums;
}
.cp-role-salary-range {
  font-size: 12px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.cp-role-certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cp-role-certs-label {
  font-size: 10.5px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.cp-role-certs-label.preferred-label { margin-left: 10px; }
.cp-role-source {
  font-size: 10.5px;
  color: var(--fg-mute);
  font-style: italic;
}

/* Related careers */
.cp-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card, transparent);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  color: var(--fg);
  transition: border-color 0.15s;
}
.cp-related-card:hover { border-color: var(--accent-cyan, #00bcd4); }
.cp-related-icon { font-size: 18px; }
.cp-related-name { font-size: 13px; }

/* ══════ COMPARE ══════ */
.cp-comp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.cp-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cp-comp-rowhead {
  text-align: left;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 140px;
}
.cp-comp-colhead {
  padding: 14px;
  text-align: center;
  background: rgba(0, 188, 212, 0.04);
  border-bottom: 2px solid var(--accent-cyan, #00bcd4);
  min-width: 180px;
}
.cp-comp-colhead-icon { font-size: 26px; margin-bottom: 4px; }
.cp-comp-colhead-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}
.cp-comp-colhead-actions { display: flex; gap: 4px; justify-content: center; }
.cp-comp-cell {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.cp-comp-row.divider .cp-comp-cell,
.cp-comp-row.divider .cp-comp-rowhead {
  border-top: 2px solid var(--border);
}
.cp-comp-list {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
}
.cp-comp-list li { padding: 2px 0; font-size: 12.5px; }
.cp-comp-tagline { font-style: italic; color: var(--fg-dim, var(--fg)); }
.cp-comp-certs { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-comp-locked { color: var(--accent-amber, #ffc107); font-weight: 600; }
.cp-comp-ready { color: var(--accent-green, #4caf50); font-weight: 600; }

.cp-compare-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-mute);
}

/* ══════ TOAST (tell-us / request-career feedback) ══════ */
.cp-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: 320px;
}
.cp-toast.ok {
  background: rgba(76, 175, 80, 0.95);
  color: white;
}
.cp-toast.error {
  background: rgba(244, 67, 54, 0.95);
  color: white;
}
.cp-toast.sending {
  background: rgba(0, 188, 212, 0.95);
  color: white;
}

/* ══════ Chooser-screen: Career Planner full-row card + divider ══════ */
/* The career-row variant of .cs-options-wrap stretches to fill the chooser
 * width, so the single career-planner card spans the entire row regardless
 * of how many cert cards appear below. Keeps visual symmetry with whatever
 * row width the cert grid resolves to. */
.cs-career-row {
  grid-template-columns: 1fr !important;
  margin-bottom: 12px;
  max-width: calc(var(--cs-card-w, 300px) * 4 + 16px * 3);
  flex-shrink: 0;
}
.cs-card-career, .cs-card-cert {
  /* The two home CTA cards (Careers + Certifications) are an identical pair
   * in every theme: same accent, centered layout, tighter padding, smaller
   * label. These rules MUST target both — applying them to only
   * .cs-card-career left the Certifications card left-aligned with a bigger
   * heading (visible mismatch). Background inherits var(--surface) from
   * .cs-card. (.cs-card-career is also reused by the chooser's Career Planner
   * hero card; .cs-card-cert is landing-only, so this is safe.) */
  border-color: var(--green) !important;
  text-align: center;
  padding: 16px 24px !important;  /* tighter than the default 28px */
}
.cs-card-career:hover, .cs-card-cert:hover {
  border-color: var(--green) !important;
  background: var(--green-bg) !important;
  transform: translateY(-2px);
}
.cs-card-career .cs-card-label, .cs-card-cert .cs-card-label {
  padding-right: 0;
  min-height: auto;
  color: var(--green);
  font-size: 22px;   /* down from default 30px */
  margin-bottom: 2px;
}
.cs-card-career .cs-card-sub, .cs-card-cert .cs-card-sub {
  color: var(--green);
  margin-bottom: 6px;   /* default is 12 */
}
.cs-card-career .cs-card-desc, .cs-card-cert .cs-card-desc {
  max-width: 720px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.5;
}
.cs-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 12px;
  max-width: calc(var(--cs-card-w, 300px) * 4 + 16px * 3);
  width: 100%;
  flex-shrink: 0;
}
.cs-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cs-divider-text {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cs-career-row { max-width: 100%; }
  .cs-divider { max-width: 100%; }
  .cs-divider-text { font-size: 10px; letter-spacing: 0.08em; }
}

/* ══════ Mobile ══════ */
@media (max-width: 720px) {
  .cp-page { padding: 16px 14px; }
  .cp-grid { grid-template-columns: 1fr; }
  .cp-detail-stats { grid-template-columns: 1fr; }
  .cp-procon, .cp-fit { grid-template-columns: 1fr; }
  .cp-detail-icon { font-size: 28px; }
  .cp-h1 { font-size: 20px; }
  .cp-comp-table { font-size: 12px; }
  .cp-comp-colhead { min-width: 140px; padding: 10px; }

  /* Defensive: prevent any descendant from forcing horizontal page scroll
   * on the detail page. Long URLs, salary strings, or cert chip rows that
   * don't wrap can push the layout wider than the viewport. */
  .cp-detail, .cp-detail * {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Stat values stay readable on narrow phones */
  .cp-stat-big-val { font-size: 18px; }
  .cp-stat-big-sub { font-size: 10.5px; }

  /* Role cert chips: ensure they wrap to new lines instead of overflowing */
  .cp-role-certs { flex-wrap: wrap; }
  .cp-role-salary { flex-wrap: wrap; }
  .cp-role-source { word-break: break-word; }

  /* Cert-step rows: blurb text should wrap properly */
  .cp-cert-step { flex-wrap: wrap; }
  .cp-cert-step-body { min-width: 0; flex: 1 1 100%; }

  /* Detail head: stack icon on top of title on narrow screens so the
   * h1 has the full width to wrap into */
  .cp-detail-head { flex-direction: row; align-items: flex-start; }
  .cp-detail-head > div { min-width: 0; flex: 1; }

  /* Related-careers row: make each card flex more tightly */
  .cp-related { flex-direction: column; }
  .cp-related-card { width: 100%; }
}

/* ══════ ONBOARDING MODAL (path-start) ══════ */
.cp-onboard-notice {
  border: 1px solid var(--cyan);
  border-left-width: 3px;
  background: rgba(0, 188, 212, 0.06);
  border-radius: 3px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cp-onboard-notice-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  font-weight: 600;
  margin-bottom: 8px;
}
.cp-onboard-notice-line {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
  margin: 0 0 8px;
}
.cp-onboard-notice-line:last-child { margin-bottom: 0; }
.cp-onboard-notice-line strong { color: var(--fg-hi); font-weight: 600; }

.cp-onboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-onboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  background: var(--input);
  transition: border-color 120ms, background 120ms;
}
.cp-onboard-row:hover { border-color: var(--border-hi); }
.cp-onboard-row.picked {
  border-color: var(--green);
  background: rgba(0, 255, 102, 0.05);
}
.cp-onboard-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.cp-onboard-row-text { flex: 1; min-width: 0; }
.cp-onboard-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-hi);
}
.cp-onboard-row-sub {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-top: 1px;
}

/* ══════ PLAN VIEW (/career/<slug>/plan) ══════ */
.cp-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.cp-stat-big { position: relative; }
.cp-stat-big-salary { color: var(--green) !important; }
.cp-stat-big-info {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  color: var(--fg-mute);
  cursor: help;
  opacity: 0.6;
}
.cp-stat-big-info:hover { opacity: 1; color: var(--cyan); }
.cp-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-hi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 12px;
}

.cp-plan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.cp-plan-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.cp-plan-row.status-have   { border-left: 3px solid var(--green); }
.cp-plan-row.status-progress { border-left: 3px solid var(--cyan); }
.cp-plan-row.status-none   { border-left: 3px solid var(--border-hi); }

.cp-plan-row-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cp-plan-row-main { min-width: 0; }
.cp-plan-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-plan-row-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
}
.cp-plan-row-req {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
}
.cp-req-required    { background: rgba(0, 188, 212, 0.1); color: var(--cyan); }
.cp-req-recommended { background: rgba(255, 193, 7, 0.1); color: var(--accent-amber, #ffc107); }
.cp-req-optional    { background: rgba(255, 255, 255, 0.05); color: var(--fg-mute); }
.cp-plan-row-coming {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-mute);
}
/* "Not planned · Request" — actionable button on plan-view cert rows for
 * certs not yet built. Cyan, button-like, clear CTA semantics. Once the
 * user clicks, this swaps to .cp-plan-row-requested (green check). */
.cp-plan-row-request {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  background: rgba(0, 188, 212, 0.1);
  color: var(--accent-cyan, #00bcd4);
  border: 1px solid var(--accent-cyan, #00bcd4);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.cp-plan-row-request:hover {
  background: rgba(0, 188, 212, 0.2);
}
.cp-plan-row-requested {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  background: rgba(0, 255, 102, 0.12);
  color: var(--green);
  border: 1px solid var(--green);
}
.cp-plan-row-examcode {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-top: 2px;
}
.cp-plan-row-meta {
  font-size: 12px;
  color: var(--fg-dim);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-plan-row-sep { color: var(--fg-mute); }

.cp-plan-row-status {
  text-align: right;
  min-width: 130px;
}
.cp-status-have {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cp-status-progress {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
}
.cp-status-sub {
  display: block;
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: 2px;
}
.cp-status-none {
  font-size: 12px;
  color: var(--fg-mute);
}

.cp-plan-actions {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.cp-plan-drop {
  margin-left: auto;
  color: #ff9090;
}
.cp-plan-drop:hover { color: #ff6b6b; border-color: #ff6b6b; }
.cp-plan-customize-hint {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--border-hi);
  font-size: 12.5px;
  color: var(--fg-dim);
  border-radius: 0 3px 3px 0;
}

@media (max-width: 720px) {
  .cp-plan-summary { grid-template-columns: 1fr; }
  .cp-plan-row {
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .cp-plan-row-status {
    grid-column: 2;
    text-align: left;
  }
  .cp-plan-actions { flex-wrap: wrap; }
}

/* ══════ LAUNCHPAD BANNER (top of plan view) ══════ */
.cp-launch-banner {
  border: 2px solid var(--cyan);
  background: linear-gradient(135deg, rgba(0, 188, 212, 0.08) 0%, rgba(0, 188, 212, 0.02) 100%);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-launch-banner.done {
  border-color: var(--green);
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.08) 0%, rgba(0, 255, 102, 0.02) 100%);
}
.cp-launch-banner.waiting {
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, 0.02);
}
.cp-launch-banner-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  font-weight: 600;
}
.cp-launch-banner.done .cp-launch-banner-eyebrow { color: var(--green); }
.cp-launch-banner.waiting .cp-launch-banner-eyebrow { color: var(--fg-mute); }
.cp-launch-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-hi);
  line-height: 1.2;
}
.cp-launch-banner-pct {
  color: var(--cyan);
  font-weight: 500;
  font-size: 16px;
}
.cp-launch-banner-body {
  font-size: 13.5px;
  color: var(--fg-dim);
  margin: 0;
  line-height: 1.5;
}
.cp-launch-cta {
  align-self: flex-start;
  margin-top: 6px;
}

/* Per-row Study button on plan view */
.cp-plan-row-study {
  margin-top: 8px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cp-launch-banner { padding: 14px 16px; }
  .cp-launch-banner-title { font-size: 17px; }
  .cp-launch-cta { align-self: stretch; }
  .cp-plan-row-study { width: 100%; }
}

/* ══════ PLAN CUSTOMIZATION (D2) ══════ */

/* Per-row reorder + remove controls.
 * Sits below the meta row inside cp-plan-row-main. Buttons are small,
 * monospace, with subtle borders that brighten on hover. */
.cp-plan-row-edit {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.cp-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mute);
  font: inherit;
  font-size: 13px;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.cp-edit-btn:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
}
.cp-edit-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cp-edit-btn.cp-edit-remove:hover:not(:disabled) {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* Add-cert button — anchored below the cert sequence */
.cp-plan-add-wrap {
  margin-bottom: 18px;
}
.cp-plan-add-btn {
  width: 100%;
  border-style: dashed;
  color: var(--fg-mute);
  padding: 10px 16px;
}
.cp-plan-add-btn:hover {
  border-style: solid;
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Add-cert modal list — each candidate is a clickable button row */
.cp-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--input);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: all 120ms;
}
.cp-add-row:hover {
  border-color: var(--cyan);
  background: rgba(0, 188, 212, 0.04);
}
.cp-add-row-main { flex: 1; min-width: 0; }
.cp-add-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-hi);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-add-row-sub {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin-top: 2px;
}
.cp-add-row-arrow {
  font-size: 20px;
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
}

/* Impact preview modal — confirm-with-context for add/remove edits */
.cp-impact-warn {
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.3);
  border-left: 3px solid #ff6b6b;
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
  margin-bottom: 16px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}
.cp-impact-warn strong { color: #ff9090; }
.cp-impact-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-impact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.cp-impact-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
}
.cp-impact-delta {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.cp-impact-delta.up   { color: #ff9090; }   /* costs going up — red */
.cp-impact-delta.down { color: var(--green); } /* costs going down — green */
.cp-impact-sep {
  border-top: 1px dashed var(--border);
  margin: 4px 0;
}
.cp-impact-total {
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* Danger variant for destructive primary buttons (required-cert removal) */
.btn-primary.btn-danger {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #000;
}
.btn-primary.btn-danger:hover {
  background: #ff5252;
  border-color: #ff5252;
}

@media (max-width: 720px) {
  .cp-plan-row-edit { gap: 6px; }
  .cp-edit-btn { width: 32px; height: 32px; font-size: 14px; }
  .cp-impact-label { font-size: 11px; }
  .cp-impact-delta, .cp-impact-total { font-size: 14px; }
}

/* Impact preview: salary projection highlight + sourcing disclaimer */
.cp-impact-salary {
  color: var(--green);
}
.cp-impact-disclaimer {
  margin: 14px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-mute);
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--border-hi);
  border-radius: 0 2px 2px 0;
}

/* Tablet: collapse 4-col summary to 2x2 before going single-col on mobile */
@media (max-width: 980px) and (min-width: 721px) {
  .cp-plan-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Path mismatch nudge — shown when certs in plan exceed the path's ceiling */
.cp-mismatch-banner {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid var(--accent-amber, #ffc107);
  border-left: 3px solid var(--accent-amber, #ffc107);
  border-radius: 0 4px 4px 0;
  margin-bottom: 18px;
}
.cp-mismatch-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.cp-mismatch-body { flex: 1; min-width: 0; }
.cp-mismatch-body strong {
  display: block;
  color: var(--accent-amber, #ffc107);
  font-size: 14px;
  margin-bottom: 4px;
}
.cp-mismatch-body p {
  font-size: 13px;
  color: var(--fg);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Impact preview: "opens higher path" inline call-out */
.cp-impact-unlock {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-left: 3px solid var(--accent-amber, #ffc107);
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
}
.cp-impact-unlock strong {
  color: var(--accent-amber, #ffc107);
  margin-right: 4px;
}

/* ══════ CAREER QUIZ ══════ */

/* Catalog banner — full-width prompt above career grid */
.cp-quiz-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, rgba(0, 188, 212, 0.08) 0%, rgba(0, 188, 212, 0.02) 100%);
  border: 1px solid var(--cyan);
  border-left-width: 3px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 120ms;
  width: 100%;
  text-align: left;
}
.cp-quiz-banner:hover {
  background: linear-gradient(90deg, rgba(0, 188, 212, 0.14) 0%, rgba(0, 188, 212, 0.04) 100%);
  transform: translateY(-1px);
}
.cp-quiz-banner:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cp-quiz-banner-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.cp-quiz-banner-text { flex: 1; min-width: 0; }
.cp-quiz-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-hi);
  margin-bottom: 2px;
}
.cp-quiz-banner-sub {
  font-size: 12.5px;
  color: var(--fg-dim);
}
.cp-quiz-banner-arrow {
  font-size: 20px;
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
}

/* Quiz page itself */
.cp-quiz { max-width: 720px; margin: 0 auto; }
.cp-quiz-head { margin-bottom: 20px; }

.cp-quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.cp-quiz-progress-track {
  flex: 1;
  height: 6px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.cp-quiz-progress-fill {
  height: 100%;
  background: var(--cyan);
  transition: width 240ms cubic-bezier(0.25, 0.5, 0.25, 1);
}
.cp-quiz-progress-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  flex-shrink: 0;
}

.cp-quiz-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px;
  background: var(--surface);
  margin-bottom: 20px;
}
.cp-quiz-question {
  font-size: 18px;
  color: var(--fg-hi);
  margin: 0 0 18px;
  line-height: 1.4;
  font-weight: 600;
}

.cp-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--input);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: all 120ms;
  width: 100%;
}
.cp-quiz-option:hover {
  border-color: var(--cyan);
  background: rgba(0, 188, 212, 0.04);
}
.cp-quiz-option.picked {
  border-color: var(--cyan);
  background: rgba(0, 188, 212, 0.08);
}
.cp-quiz-option-marker {
  color: var(--fg-mute);
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}
.cp-quiz-option.picked .cp-quiz-option-marker {
  color: var(--cyan);
}
.cp-quiz-option-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
}

.cp-quiz-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Quiz results */
.cp-quiz-results { max-width: 720px; margin: 0 auto; }

.cp-quiz-result-winner {
  border: 2px solid var(--green);
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.08) 0%, rgba(0, 255, 102, 0.02) 100%);
  border-radius: 4px;
  padding: 22px 24px;
  margin-bottom: 24px;
}
.cp-quiz-result-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 8px;
}
.cp-quiz-result-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-hi);
  margin-bottom: 4px;
}
.cp-quiz-result-tagline {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0 0 14px;
  line-height: 1.5;
}
.cp-quiz-result-reasons {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--green);
  border-radius: 0 3px 3px 0;
}
.cp-quiz-result-reasons-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.cp-quiz-result-reasons ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.cp-quiz-result-reasons li {
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.5;
  margin-bottom: 4px;
}
.cp-quiz-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Runners-up — smaller cards in a column */
.cp-quiz-result-others {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-quiz-result-other {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: all 120ms;
  width: 100%;
}
.cp-quiz-result-other:hover {
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.cp-quiz-result-other-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cp-quiz-result-other-rank {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  font-weight: 600;
}
.cp-quiz-result-other-icon { font-size: 16px; }
.cp-quiz-result-other-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-hi);
}
.cp-quiz-result-other-tagline {
  font-size: 12.5px;
  color: var(--fg-dim);
  margin: 0 0 6px;
  line-height: 1.5;
}
.cp-quiz-result-other-reason {
  font-size: 11.5px;
  color: var(--fg-mute);
  margin: 0;
  font-style: italic;
}

.cp-quiz-result-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.cp-quiz-result-taken {
  font-size: 11.5px;
  color: var(--fg-mute);
}

@media (max-width: 720px) {
  .cp-quiz-banner { flex-wrap: wrap; }
  .cp-quiz-card { padding: 16px; }
  .cp-quiz-question { font-size: 16px; }
  .cp-quiz-result-name { font-size: 20px; }
  .cp-quiz-result-actions .btn { flex: 1; min-width: 0; }
}