/* ═══════════════════════════════════════════════════════════════════════
   Career Paths — features/career_paths/templates/career_paths.html
   v1 2026-10-15 (audit/career_paths_plan.md): Nate's Career Paths v14 design
   on phones. v2 2026-10-15 (audit/career_paths_v2_plan.md): desktop follows
   Nate's "Future spotlight" — the three futures side by side with the one
   being viewed spotlighted, the journey as year cards with the chosen year's
   details open, an "AI opportunities" card and the full v14 comparison.
   Tool colour: the design's indigo (core/app_shell.TOOL_COLORS["careers"]);
   school accounts get their school colour through --color-primary.
   ═══════════════════════════════════════════════════════════════════════ */
.cp {
  --cp: var(--color-primary, #5b4ce6);
  --cp-dk: var(--color-primary-hover, #4636c9);
  --cp-ink: var(--tool-ink, var(--cp));
  --cp-soft: color-mix(in srgb, var(--cp) 9%, #fff);
  --cp-line: color-mix(in srgb, var(--cp) 30%, #fff);
  --teal: #0b7a83; --teal-soft: #eaf8f9; --teal-line: #bfe5e8;
  --amber: #b0510a; --amber-bright: #f07819; --amber-soft: #fff5e9; --amber-line: #f5d9be;
  --ink: #0f172a; --text: #1e293b; --muted: #5b6577; --faint: #7b8494; --line: #e4e7f1; --line-2: #d7dbea;
  --shadow: 0 10px 28px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .03);
  color: var(--text); font-size: 15px; line-height: 1.5;
}
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp [hidden] { display: none !important; }
.cp h1, .cp h2, .cp h3, .cp p, .cp ul, .cp ol, .cp dl, .cp dd { margin: 0; }
.cp :focus-visible { outline: 3px solid color-mix(in srgb, var(--cp) 45%, transparent); outline-offset: 2px; }
.cp-k-quick { --k: var(--teal); --k-soft: var(--teal-soft); --k-line: var(--teal-line); }
.cp-k-balanced { --k: var(--cp); --k-soft: var(--cp-soft); --k-line: var(--cp-line); }
.cp-k-ceiling { --k: var(--amber); --k-soft: var(--amber-soft); --k-line: var(--amber-line); }

/* Header: the builders' bar (Nate, 2026-10-15, option B). */
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; min-height: 72px;
  background: #fff; border-bottom: 3px solid var(--cp); }
.cp-head-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.cp .cp-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--cp-ink); line-height: 1.2; }
.cp-title-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cp); color: #fff; flex: 0 0 auto; }
.cp-title-ic svg { width: 20px; height: 20px; }
.cp-head-meta { font-size: 14px; color: var(--muted); }
.cp-head-meta b { color: var(--ink); font-weight: 650; }

/* Buttons */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.cp-btn svg { width: 18px; height: 18px; }
.cp-btn:disabled { opacity: .6; cursor: default; }
.cp-btn-pri { background: linear-gradient(135deg, var(--cp), var(--cp-dk)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--cp) 25%, transparent); }
.cp-btn-pri:hover:not(:disabled) { filter: brightness(.96); }
.cp-btn-out { background: #fff; border-color: var(--cp-line); color: var(--cp-ink); }
.cp-btn-out:hover:not(:disabled) { background: var(--cp-soft); }
.cp-btn-ghost { background: transparent; color: var(--muted); }
.cp-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.cp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cp-ink); cursor: pointer; min-height: 40px; }

.cp-main { max-width: 1320px; margin: 0 auto; padding: 22px 26px 24px; }
.cp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.cp-h2 { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.cp-sub { font-size: 14px; color: var(--muted); margin-top: 2px !important; }
.cp-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--k, var(--cp-ink)); }
.cp-kick-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #fff; }
.cp-kick-ic svg { width: 13px; height: 13px; stroke-width: 2.6; }
.cp-now { font-size: 11.5px; letter-spacing: 0; text-transform: none; background: var(--k-soft); color: var(--k); border-radius: 999px; padding: 2px 10px; }
.cp-hint { font-size: 13px; color: var(--muted); margin-top: 8px !important; }
.cp-warn { color: #9a3412; }

/* Empty, locked, old format */
.cp-empty { max-width: 640px; margin: 24px auto; padding: 28px; display: grid; gap: 12px; justify-items: start; }
.cp-empty h2 { font-size: 22px; color: var(--ink); letter-spacing: -.02em; }
.cp-empty p { color: var(--muted); }
.cp-upsell ul { padding-left: 20px; display: grid; gap: 6px; }
.cp-upsell .cp-kick { color: #8a5a00; }

/* "Not seeing a direction that excites you?" */
.cp-hub { padding: 16px 18px; margin-bottom: 18px; }
.cp-hub h2 { font-size: 17px; font-weight: 800; color: var(--cp-ink); }
.cp-hub > p { font-size: 13.5px; color: var(--muted); margin: 2px 0 12px !important; }
.cp-hub-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-hub-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.cp-hub-opt:hover { border-color: var(--cp-line); background: #fbfaff; }
.cp-hub-opt .cp-other-ic { width: 40px; height: 40px; }
.cp-hub-left { color: var(--faint) !important; font-size: 12px !important; margin-top: 1px; }
.cp-other-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cp-soft); color: var(--cp-ink); }
.cp-other-ic svg { width: 18px; height: 18px; }
.cp-other-t b { display: block; font-size: 14px; color: var(--ink); }
.cp-other-t small { display: block; font-size: 13px; color: var(--muted); }
.cp-other-go { width: 18px; height: 18px; color: var(--cp-ink); }
.cp-other-list { display: grid; }
.cp-other-btn { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 9px 0; min-height: 52px;
  background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; text-align: left; cursor: pointer; color: inherit; }
.cp-other-btn:last-child { border-bottom: 0; }
.cp-other-phone { display: none; }

/* ── The futures ── */
.cp-fsec { padding: 18px; }
.cp-fsec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cp-here { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fbfbfe;
  font-size: 13px; color: var(--muted); white-space: nowrap; }
.cp-here svg { width: 15px; height: 15px; color: var(--cp-ink); }
.cp-futures { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.cp-futures:has(> .cp-fut.on:first-child) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
.cp-futures:has(> .cp-fut.on:last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); }
.cp-futures:has(> .cp-fut:only-child) { grid-template-columns: minmax(0, 1fr); }
.cp-futures:has(> .cp-fut:first-child:nth-last-child(2)) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cp-futures:has(> .cp-fut:first-child:nth-last-child(2)) > .cp-fut.on:last-child { order: -1; }
.cp-fut { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left; border: 1.5px solid color-mix(in srgb, var(--k) 32%, var(--line));
  border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; color: inherit; background: linear-gradient(180deg, #fff 55%, var(--k-soft)); }
.cp-fut:hover { border-color: var(--k-line); }
.cp-fut.on { cursor: default; background: #fff; border-color: var(--k); box-shadow: 0 14px 34px color-mix(in srgb, var(--k) 16%, transparent); }
.cp-fut-short { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cp-fut.on .cp-fut-short { display: none; }
.cp-fut-full { display: none; }
.cp-fut.on .cp-fut-full { display: block; }
.cp-fut-k { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.cp-fut-k i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #fff; }
.cp-fut-k svg { width: 13px; height: 13px; stroke-width: 2.6; }
.cp-fut-mine { align-self: flex-start; font-size: 12px; font-weight: 800; color: #fff; background: var(--k); border-radius: 999px; padding: 2px 10px; margin-top: 6px; }
.cp-fut-r { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-top: 8px; line-height: 1.25; }
.cp-fut-fit { font-size: 13.5px; font-weight: 700; color: var(--k); }
.cp-fut-d { font-size: 14px; color: var(--muted); margin-top: 8px; }
.cp-fut-pm { display: grid; gap: 3px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.cp-fut-pm i { font-style: normal; font-weight: 800; display: inline-block; width: 16px; }
.cp-fut-plus i { color: var(--k); }
.cp-fut-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--faint); }
.cp-fut-pm + .cp-fut-s, .cp-fut-d + .cp-fut-s { margin-top: 14px; }
.cp-fut-s b { display: block; color: var(--ink); font-size: 14px; }
.cp-fut-explore { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--k); }
.cp-fut-go { display: none; }
.cp-chips { display: none; }
.cp-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px !important; font-size: 13px; color: var(--muted); }
.cp-legend b { color: var(--cp-ink); }

/* The spotlight (the full face of the chosen card) */
.cp-role { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-top: 8px !important; line-height: 1.15; }
.cp-fitbig { font-size: 15px; font-weight: 700; color: var(--k); }
.cp-desc { margin-top: 6px !important; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cp-route { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cp-route-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-route-dest { text-align: right; flex-direction: row-reverse; }
.cp-route-end svg { width: 20px; height: 20px; color: var(--k); flex: 0 0 auto; }
.cp-route-end b { display: block; font-size: 14px; color: var(--ink); }
.cp-route-dash { flex: 1; min-width: 20px; border-top: 2px dotted var(--k-line); }
.cp-strengths { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-strengths span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: #f5f6fb; border: 1px solid var(--line); color: #475569; }
.cp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; overflow: hidden; }
.cp-stats div { padding: 10px 12px; border-right: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.cp-stats div:last-child { border-right: 0; }
.cp-stats span { display: flex; align-items: center; gap: 5px; }
.cp-stats span svg { width: 14px; height: 14px; color: var(--k); }
.cp-stats b { display: block; font-size: 17px; color: var(--ink); margin-top: 2px; }
.cp-edu { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin-top: 10px !important; }
.cp-edu b { color: var(--ink); }
.cp-edu svg { width: 18px; height: 18px; color: var(--k); flex: 0 0 auto; }
.cp-at { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cp-at > div { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f8f9fd; font-size: 14px; }
.cp-at svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ink); }
.cp-at b { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.cp-at span { color: var(--k); font-weight: 700; }
/* "About this route": the detail the preview card leaves out (2026-10-17) */
.cp-about { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; margin: 0 0 14px; }
.cp-about-h { font-size: 15px; font-weight: 800; color: var(--ink); }
.cp-about-d { margin-top: 6px !important; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.cp-about-s { margin-top: 10px; }
.cp-about-l { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cp-about .cp-strengths { margin-top: 6px; }
.cp-focus-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ── Journey (desktop) + AI opportunities ── */
.cp-jgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 22px; }
.cp-jtitle { font-size: 19px; font-weight: 800; color: var(--k); letter-spacing: -.01em; margin-bottom: 10px !important; }
.cp-years { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.cp-yr { flex: 1 1 0; min-width: 160px; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.cp-yr:hover { border-color: var(--k-line); }
.cp-yr.on { border-color: var(--k); background: var(--k-soft); }
.cp-yr i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--k-soft); color: var(--k); flex: 0 0 auto; }
.cp-yr.on i { background: #fff; }
.cp-yr i svg { width: 19px; height: 19px; }
.cp-yr-dest i { background: var(--amber-bright) !important; color: #fff; }
.cp-yr span { min-width: 0; }
.cp-yr small { display: block; font-size: 12px; font-weight: 800; color: var(--k); }
.cp-yr b { display: block; font-size: 14px; color: var(--ink); line-height: 1.25; }
.cp-yr em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.cp-det { margin-top: 4px; }
.cp-det-wait { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-top: 0 !important; }
.cp-four { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.15fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.cp-four > div { padding: 14px 16px; border-right: 1px solid var(--line); font-size: 14px; min-width: 0; }
.cp-four > div:last-child { border-right: 0; }
.cp-four b { display: block; color: var(--k); margin-bottom: 4px; }
.cp-four-act { background: var(--k-soft); }
.cp-four-act span { color: var(--ink); font-weight: 700; display: block; }
.cp-four-edu { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin-top: 8px !important; }
.cp-four-edu svg { width: 15px; height: 15px; color: var(--k); flex: 0 0 auto; margin-top: 2px; }
.cp-checks { list-style: none; padding: 0; display: grid; gap: 4px; }
.cp-checks li { display: flex; gap: 6px; align-items: flex-start; }
.cp-checks svg { width: 15px; height: 15px; color: var(--k); flex: 0 0 auto; margin-top: 3px; }
.cp-ideas-btn { margin-top: 10px; width: 100%; }
.cp-jobs { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--cp-ink); text-decoration: none; }
.cp-jobs:hover { text-decoration: underline; }
.cp-jobs svg { width: 15px; height: 15px; }
.cp-ideas { list-style: none; padding: 0; display: grid; gap: 10px; }
.cp-ideas li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cp-ideas b { display: block; color: var(--ink); }
.cp-ideas span { font-size: 14px; color: var(--muted); }

.cp-ai { padding: 16px; }
.cp-ai-h { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink); margin-bottom: 12px !important; }
.cp-ai-t { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cp-ai-t i { width: 40px; height: 40px; border-radius: 11px; background: #1e293b; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cp-ai-t i svg { width: 19px; height: 19px; fill: currentColor; }
.cp-ai-t b { font-size: 15px; color: var(--ink); line-height: 1.3; }
.cp-ai-dl dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); margin-top: 10px; }
.cp-ai-dl dt svg { width: 14px; height: 14px; }
.cp-ai-dl dd { font-size: 14px; font-weight: 650; color: var(--ink); }
.cp-ai-none { font-size: 14px; color: var(--muted); }
.cp-ai-btn { width: 100%; margin-top: 14px; }

/* Choose: a bar that stays in reach at the bottom of the window. */
.cp-cta { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); }
.cp-cta .cp-choose { min-height: 48px; padding: 0 26px; font-size: 16px; }
.cp-cta .cp-chosen { background: #fff; color: var(--cp-ink); border-color: var(--cp-line); box-shadow: none; }
.cp-cta p { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cp-cta p svg { width: 15px; height: 15px; color: var(--cp-ink); flex: 0 0 auto; }
.cp-cta-cmp { display: none; }
.cp-note { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 12px !important; }
.cp-note svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Phone-only journey pieces (chapter list), hidden styles still needed here. */
.cp-jhead { margin-bottom: 10px; }
.cp-chs { list-style: none; padding: 0; display: grid; gap: 10px; }
.cp-ch { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; position: relative; }
.cp-ch:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: -12px; width: 3px; background: var(--k-line); }
.cp-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--k); position: relative; z-index: 1; }
.cp-ch-dest .cp-dot { background: var(--amber-bright); }
.cp-dot svg { width: 18px; height: 18px; }
.cp-chcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.cp-chcard.open { border-color: var(--k-line); box-shadow: 0 0 0 1px var(--k-line); }
.cp-chhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; min-height: 64px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.cp-chtext small { display: block; font-size: 12px; font-weight: 800; color: var(--k); letter-spacing: .02em; }
.cp-ch-dest .cp-chtext small { color: var(--amber); }
.cp-chtext b { display: block; font-size: 16px; color: var(--ink); line-height: 1.3; }
.cp-chtext em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.cp-chev { width: 20px; height: 20px; color: var(--k); flex: 0 0 auto; transition: transform .15s; }
.cp-chhead[aria-expanded="true"] .cp-chev { transform: rotate(180deg); }
.cp-chbody { padding: 0 14px 14px; }
.cp-dotplus { width: 36px; display: grid; place-items: center; }
.cp-dotplus span { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px dashed var(--k-line); color: var(--k); display: grid; place-items: center;
  font-weight: 800; font-size: 16px; line-height: 1; position: relative; z-index: 1; }
.cp-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--k-soft); border: 1px dashed var(--k-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.cp-acc > i { width: 36px; height: 36px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cp-acc > i svg { width: 18px; height: 18px; fill: currentColor; }
.cp-acc-t { min-width: 0; flex: 1; }
.cp-acc-t small { display: block; font-size: 12px; font-weight: 800; color: var(--k); }
.cp-acc-t b { display: block; color: var(--ink); }
.cp-acc-t p { font-size: 13px; color: var(--muted); }
.cp-acc .cp-btn { width: 100%; }

/* Dialog */
.cp-dlg { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 16px; padding: 22px; color: var(--text);
  font-size: 15px; box-shadow: 0 28px 70px rgba(7, 26, 66, .25); }
.cp-dlg::backdrop { background: rgba(7, 26, 66, .5); backdrop-filter: blur(3px); }
.cp-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-dlg h2 { margin: 0; font-size: 21px; color: var(--ink); letter-spacing: -.02em; }
.cp #cpDlgTitle:focus, .cp #cpDlgTitle:focus-visible { outline: none; }
.cp-x { width: 40px; height: 40px; border: 0; background: #f2f4f8; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; flex: 0 0 auto; }
.cp-dlg-p { margin-bottom: 12px !important; }
.cp-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 4px 0 6px; }
.cp-input { width: 100%; min-height: 46px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); }
.cp-input:focus { border-color: var(--cp); outline: 0; box-shadow: 0 0 0 3px var(--cp-soft); }
.cp-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cp-dlg-acts-col { flex-direction: column; align-items: stretch; }
.cp-prog { height: 6px; background: #eef0f6; border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.cp-prog i { display: block; height: 100%; background: var(--cp); }
.cp-qnum { font-size: 13px; color: var(--muted); }
.cp-qq { font-size: 18px; font-weight: 750; color: var(--ink); margin: 2px 0 12px !important; }
.cp-qopts { display: grid; gap: 8px; }
.cp-qopt, .cp-sug { min-height: 48px; padding: 10px 14px; text-align: left; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.cp-qopt:hover, .cp-sug:hover { border-color: var(--cp); background: var(--cp-soft); }
.cp-sugs { display: grid; gap: 8px; }
.cp-accopt { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
.cp-accopt small { font-size: 12px; font-weight: 800; color: var(--cp-ink); }
.cp-accopt b { color: var(--ink); }
.cp-accopt ul { padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.cp-impact { font-weight: 700; color: #047857; font-size: 14px; }

/* Compare (Nate's v14 comparison) */
.cp-dlg.cp-dlg-cmp { width: min(1140px, calc(100vw - 32px)); }
/* The table scrolls; the heading, perspective and buttons always fit. */
.cp-dlg.cp-dlg-cmp[open] { display: flex; flex-direction: column; overflow: hidden; }
.cp-dlg-cmp .cp-dlg-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cp-dlg-cmp .cp-dlg-body > * { flex-shrink: 0; }
.cp-dlg-cmp .cp-dlg-body > .cp-cmp-scroll { flex: 1 1 auto; flex-shrink: 1; min-height: 180px; max-height: none; }
.cp-cmp-sub { color: var(--muted); font-size: 14px; }
.cp-cmp-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cp-cmp-jump .cp-link { min-height: 32px; font-size: 14px; }
.cp-cmp-scroll { overflow: auto; max-height: min(58vh, 640px); }
.cp-cmp { --first: 200px; display: grid; gap: 12px; min-width: 760px; padding-bottom: 4px; }
.cp-cmp-heads, .cp-cmp-row { display: grid; grid-template-columns: var(--first) repeat(var(--n, 3), minmax(0, 1fr)); }
.cp-cmp-heads { gap: 10px; position: sticky; top: 0; z-index: 2; background: #fff; padding: 8px 0; }
.cp-cmp-route { border: 1.5px solid var(--k); border-radius: 14px; padding: 10px 12px; }
.cp-cmp-route small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.cp-cmp-route b { display: block; color: var(--ink); font-size: 15px; line-height: 1.25; }
.cp-cmp-route span { font-size: 12.5px; color: var(--k); }
.cp-cmp-sec { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; scroll-margin-top: 90px; }
.cp-cmp-sec h3 { margin: 0; padding: 10px 14px; background: #f8f7ff; color: var(--cp-ink); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.cp-cmp-row { border-top: 1px solid var(--line); }
.cp-cmp-k { padding: 10px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; position: sticky; left: 0; }
.cp-cmp-v { padding: 10px 12px; font-size: 13.5px; text-align: center; color: var(--k); border-left: 1px solid var(--line); }
.cp-cmp-wait { background: linear-gradient(90deg, #f3f4f9 25%, #eceef6 50%, #f3f4f9 75%); background-size: 200% 100%; animation: cp-shimmer 1.4s infinite linear; }
@keyframes cp-shimmer { to { background-position: -200% 0; } }
.cp-persp { margin-top: 14px; border: 1.5px solid var(--k-line); background: var(--k-soft); border-radius: 14px; padding: 14px 16px; }
.cp-persp small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.cp-persp b { display: block; font-size: 16px; color: var(--ink); margin: 3px 0; }
.cp-persp p { color: var(--text); }

.cp-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 150; max-width: min(440px, calc(100vw - 32px)); background: #0f172a; color: #fff;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .25); }

/* Narrower laptops */
@media (max-width: 1240px) {
  .cp-jgrid { grid-template-columns: minmax(0, 1fr) 260px; }
  .cp-four { grid-template-columns: 1fr 1fr; }
  .cp-four > div:nth-child(2n) { border-right: 0; }
  .cp-four > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
/* Tablets: the hub stacks, the futures stack with the spotlight first, the
   AI card goes under the journey. */
@media (max-width: 1000px) and (min-width: 761px) {
  .cp-hub { display: none !important; }
  .cp-other-phone { display: block; margin-bottom: 16px; padding: 0; }
  .cp-other-phone summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; min-height: 56px; }
  .cp-other-phone summary::-webkit-details-marker { display: none; }
  .cp-other-phone summary b { display: block; color: var(--cp-ink); font-size: 15px; }
  .cp-other-phone summary small { display: block; font-size: 13px; color: var(--muted); }
  .cp-other-phone summary svg { width: 20px; height: 20px; color: var(--cp-ink); flex: 0 0 auto; transition: transform .15s; }
  .cp-other-phone[open] summary svg { transform: rotate(180deg); }
  .cp-other-phone .cp-other-list { padding: 0 16px 6px; border-top: 1px solid var(--line); }
  .cp-futures, .cp-futures:has(> .cp-fut.on:first-child), .cp-futures:has(> .cp-fut.on:last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cp-fut.on { grid-column: 1 / -1; order: -1; }
  .cp-jgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: Nate's v14 design. Swipeable deck, chips, the chapter list. */
@media (max-width: 760px) {
  .cp-head { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 16px; min-height: 0; border-bottom: 1px solid var(--line); }
  .cp-head-text { display: block; }
  .cp .cp-title { font-size: 18px; }
  .cp-title-ic, .cp-head-cmp { display: none !important; }
  .cp-head-meta { font-size: 13px; margin-top: 2px; }
  .cp-main { padding: 14px 16px 28px; }
  .cp-hub { display: none !important; }
  .cp-other-phone { display: block; margin-bottom: 16px; padding: 0; }
  .cp-other-phone summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 56px; }
  .cp-other-phone summary::-webkit-details-marker { display: none; }
  .cp-other-phone summary b { display: block; color: var(--cp-ink); font-size: 15px; }
  .cp-other-phone summary small { display: block; font-size: 13px; color: var(--muted); }
  .cp-other-phone summary svg { width: 20px; height: 20px; color: var(--cp-ink); flex: 0 0 auto; transition: transform .15s; }
  .cp-other-phone[open] summary svg { transform: rotate(180deg); }
  .cp-other-phone .cp-other-list { padding: 0 14px 6px; border-top: 1px solid var(--line); }
  .cp-fsec { padding: 0; border: 0; background: none; box-shadow: none; }
  .cp-fsec-h { margin-bottom: 10px; }
  .cp-here, .cp-legend { display: none; }
  /* The deck: the chosen future in the middle, the others peeking out
     behind it on each side. Swipe, tap a side card or use the chips. */
  .cp-futures { display: block; position: relative; margin: 0 -16px; padding: 4px 0 12px; overflow: hidden; touch-action: pan-y; }
  .cp-fut { position: absolute; top: 34px; width: 32%; min-height: 220px; transition: left .28s ease, opacity .28s ease, transform .28s ease; z-index: 1; background: #fff; }
  /* Wider centre card, slimmer peeks: shorter lines keep the preview to
     about one screen (Nate's mockup, 2026-10-17; it was 1,065px tall). */
  .cp-fut.on { position: relative; top: 0; left: auto; width: 76%; margin: 0 auto; z-index: 2; }
  .cp-fut:not(.on) { padding: 12px 10px; }
  .cp-fut.cp-prev { left: 1%; }
  .cp-fut.cp-next { left: calc(88% - 4px); }
  .cp-fut.cp-away { opacity: 0; pointer-events: none; left: 40%; }
  .cp-fut:not(.on) .cp-fut-s, .cp-fut:not(.on) .cp-fut-mine, .cp-fut:not(.on) .cp-fut-d, .cp-fut:not(.on) .cp-fut-pm, .cp-fut:not(.on) .cp-fut-explore { display: none; }
  .cp-fut:not(.on) .cp-fut-r { font-size: 17px; color: var(--k); }
  .cp-fut:not(.on) .cp-fut-fit { font-size: 12px; }
  .cp-fut:not(.on) .cp-fut-k i { width: 30px; height: 30px; }
  .cp-fut:not(.on) .cp-fut-k { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cp-fut-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--k-line); color: var(--k); margin-top: 14px; }
  .cp-fut-go svg { width: 18px; height: 18px; }
  .cp-fut.on { padding: 14px; box-shadow: 0 0 0 3px var(--k-soft), 0 14px 30px rgba(15, 23, 42, .14); }
  .cp-fut.on .cp-kick { font-size: 11.5px; }
  .cp-fut.on .cp-role { font-size: 21px; }
  .cp-fut.on .cp-desc { font-size: 13.5px; line-height: 1.45; }
  .cp-fut.on .cp-route { gap: 6px; margin-top: 10px; font-size: 11.5px; }
  .cp-fut.on .cp-route-end { gap: 5px; }
  .cp-fut.on .cp-route-end svg { width: 16px; height: 16px; }
  .cp-fut.on .cp-route-end b { font-size: 12.5px; line-height: 1.3; }
  .cp-fut.on .cp-route-dash { min-width: 10px; }
  .cp-fut.on .cp-at { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .cp-fut.on .cp-at > div { display: block; position: relative; padding: 7px 8px 7px 28px; font-size: 12.5px; line-height: 1.35; }
  .cp-fut.on .cp-at svg { position: absolute; left: 8px; top: 8px; width: 15px; height: 15px; }
  .cp-fut.on .cp-at b { font-size: 11.5px; }
  .cp-fut.on .cp-stats { margin-top: 10px; }
  .cp-fut.on .cp-stats div { padding: 7px 6px; font-size: 11px; }
  .cp-fut.on .cp-stats span { gap: 3px; line-height: 1.25; }
  .cp-fut.on .cp-stats span svg { display: none; }
  .cp-fut.on .cp-stats b { font-size: 13.5px; line-height: 1.25; }
  .cp-focus-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 10px; }
  .cp-fut.on .cp-focus-btns .cp-btn { padding-left: 8px; padding-right: 8px; font-size: 13px; min-height: 40px; }
  .cp-chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .cp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 999px; background: none;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
  .cp-chip i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--k); }
  .cp-chip.on { border-color: var(--k); background: #fff; }
  .cp-jgrid { display: block; margin-top: 8px; }
  .cp-ai { display: none; }
  .cp-four { grid-template-columns: minmax(0, 1fr); }
  .cp-four > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .cp-four > div:last-child { border-bottom: 0; }
  .cp-cta { position: static; padding: 12px; }
  .cp-cta .cp-btn { flex: 1 1 auto; }
  .cp-cta .cp-choose { flex: 2 1 60%; }
  .cp-cta-cmp { display: inline-flex; }
  .cp-cta p { flex-basis: 100%; }
  .cp-dlg, .cp-dlg.cp-dlg-cmp { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .cp-cmp { --first: 120px; min-width: 560px; }
  /* Phone: the whole sheet scrolls; the table only scrolls sideways. */
  .cp-dlg.cp-dlg-cmp[open] { display: block; overflow-y: auto; }
  .cp-dlg-cmp .cp-dlg-body > .cp-cmp-scroll { overflow-x: auto; overflow-y: visible; max-height: none; }
  .cp-cmp-heads { position: static; }
  .cp-cmp-jump { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 16px; }
  .cp-cmp-jump .cp-link { white-space: nowrap; font-size: 13.5px; }
  .cp-cmp-k { font-size: 12.5px; box-shadow: 1px 0 0 var(--line); }
  .cp-cmp-v { font-size: 12.5px; padding: 8px; }
  .cp-toast { left: 16px; right: 16px; transform: none; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cp-chev, .cp-other-phone summary svg { transition: none; } .cp-cmp-wait { animation: none; } }

/* ═══ Design pass A (2026-10-29, audit/design_pass_a_plan.md) ═════════════
   Nate's approved new look: a compact header with a solid icon tile, depth on
   cards and buttons, the futures as a revolving door that sits on the page
   (no box), and the chapter panel rebuilt so no column is left half empty.
   Layout follows the page's own width, not the screen's. */
/* The header keeps its solid line in the page colour (a school's colour wins; the Maryville canary checks it). */
.cp-title-ic { width: 40px; height: 40px; border-radius: 12px; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--cp) 62%, #fff) 0%, var(--cp) 58%, color-mix(in srgb, var(--cp) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px color-mix(in srgb, var(--cp) 70%, transparent); }
.cp-title-ic svg { width: 22px; height: 22px; }
.cp-title-ic svg .duo { opacity: .35; }
.cp .cp-title { font-weight: 850; }
.cp-btn { border-radius: 12px; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.cp-btn-pri { background: linear-gradient(180deg, color-mix(in srgb, var(--cp) 82%, #fff), var(--cp));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 1px rgba(15,23,42,.08), 0 8px 16px -8px color-mix(in srgb, var(--cp) 80%, transparent); }
.cp-btn-pri:hover:not(:disabled) { filter: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 20px -8px color-mix(in srgb, var(--cp) 85%, transparent); }
.cp-btn-out { background: linear-gradient(#fff, #f8fafc); box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 1px 0 #fff; }
.cp-btn-out:hover:not(:disabled) { background: #fff; transform: translateY(-1px); border-color: color-mix(in srgb, var(--cp) 45%, #fff); box-shadow: 0 6px 14px -8px rgba(15,23,42,.25); }
.cp-card { border-radius: 18px; border-color: #e6e4f4; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06); }

/* "Not seeing a direction": solid icon tiles, an arrow that fills on hover */
.cp-hub-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cp-hub-opt { grid-template-columns: 52px minmax(0, 1fr) 34px; padding: 14px; border-radius: 16px; background: linear-gradient(#fff, #fbfaff); }
.cp-hub-opt .cp-other-ic.dp-tile { width: 52px; height: 52px; border-radius: 15px; }
.cp-hub-opt .cp-other-ic.dp-tile svg { width: 26px; height: 26px; }
.cp-hub-left { color: var(--cp-ink) !important; font-weight: 700; }
.cp-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--t); background: color-mix(in srgb, var(--t) 10%, #fff); transition: transform .18s, background .18s, color .18s; }
.cp-go svg { width: 16px; height: 16px; }
.cp-hub-opt:hover .cp-go { transform: translateX(3px); background: var(--t); color: #fff; }
.cp-other-btn .cp-other-ic.dp-tile { width: 34px; height: 34px; border-radius: 10px; }
.cp-other-btn .cp-other-ic.dp-tile svg { width: 18px; height: 18px; }
.cp-other-phone summary { justify-content: flex-start !important; }
.cp-other-phone summary > svg:last-child { margin-left: auto; }
.cp-other-sic { --t: var(--cp); }
.cp-other-st { min-width: 0; }

/* ── The futures: revolving door ── */
.cp-fsec { padding: 0; background: none; border: 0; box-shadow: none; margin-top: 4px; overflow-x: clip; }
.cp-fsec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.cp-fsec-aside { font-size: 13px; font-weight: 600; color: var(--muted); }
.cp-rev { position: relative; }
.cp-ring { position: relative; height: 470px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.cp-ring:focus-visible { outline: 3px solid color-mix(in srgb, var(--cp) 35%, transparent); outline-offset: 4px; border-radius: 22px; }
.cp-ring.cp-dragging { cursor: grabbing; }
.cp-rcard { position: absolute; left: 50%; top: 14px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--k) 22%, var(--line)); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.25);
  transform-origin: 50% 40%; will-change: transform; backface-visibility: hidden; text-align: left; }
.cp-rcard.on { border: 2px solid var(--k); box-shadow: 0 34px 60px -26px color-mix(in srgb, var(--k) 80%, transparent), 0 2px 6px rgba(15,23,42,.08); }
.cp-rcard:not(.on) { filter: saturate(.75); cursor: pointer; }
.cp-rcard .cp-kick { font-size: 12px; }
.cp-rcard .cp-kick-ic { width: 34px; height: 34px; border-radius: 10px; }
.cp-rcard .cp-kick-ic svg { width: 18px; height: 18px; stroke-width: 2; }
.cp-rcard .cp-now { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; padding: 3px 10px; }
.cp-rcard .cp-now svg { width: 13px; height: 13px; }
.cp-rcard .cp-role { font-size: 25px; font-weight: 850; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.cp-subline { margin-top: -6px !important; font-size: 13.5px; color: var(--muted); }
.cp-rcard .cp-route { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; font-size: 11.5px; color: var(--muted); }
.cp-rcard .cp-route-end { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.cp-rcard .cp-route-end svg { margin-top: 10px; }
.cp-rcard .cp-route-end b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.25; }
.cp-rcard .cp-route-dest { justify-content: flex-end; text-align: right; }
.cp-rcard .cp-route-dash { border-top: 2px dotted color-mix(in srgb, var(--k) 55%, #fff); min-width: 0; }
.cp-rcard .cp-desc { font-size: 13.5px; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-rcard .cp-at { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cp-rcard .cp-at > div { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; padding: 9px 10px; border-radius: 12px; border: 0; }
.cp-rcard .cp-at svg { width: 15px; height: 15px; margin-top: 1px; }
.cp-rcard .cp-at p { font-size: 12.5px; line-height: 1.35; margin: 0; }
.cp-rcard .cp-at b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cp-rcard .cp-at span { color: inherit; font-weight: 500; }
.cp-rcard .cp-adv { background: #ecfdf3; color: #166534; } .cp-rcard .cp-adv b { color: #15803d; }
.cp-rcard .cp-trd { background: #fff7ed; color: #9a3412; } .cp-rcard .cp-trd b { color: #c2410c; }
.cp-rcard .cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cp-rcard .cp-stats > div { background: linear-gradient(#fbfcfe, #f6f8fb); border: 1px solid #eef2f7; border-radius: 12px; padding: 9px 11px; min-width: 0; }
.cp-rcard .cp-stats > div:last-child { grid-column: 1 / -1; }
.cp-rcard .cp-stats span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cp-rcard .cp-stats span svg { width: 13px; height: 13px; color: var(--k); display: block; }
.cp-rcard .cp-stats b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.cp-rcard .cp-stats > div:last-child b { font-size: 17px; color: var(--k); }
.cp-rcard .cp-focus-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cp-rcard .cp-focus-btns .cp-btn { min-height: 38px; font-size: 13.5px; }
.cp-rcard .cp-btn-pri { --cp: var(--k); }
.cp-rev-arrow { position: absolute; top: 46%; z-index: 20; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px -10px rgba(15,23,42,.25); display: grid; place-items: center; color: var(--cp-ink); cursor: pointer; }
.cp-rev-arrow svg { width: 18px; height: 18px; }
.cp-rev-l { left: 0; } .cp-rev-r { right: 0; }
.cp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.cp-dotb { width: 8px; height: 8px; border-radius: 99px; background: #cbd5e1; transition: width .2s, background .2s; }
.cp-dotb.on { width: 22px; background: var(--k); }

/* ── The route below: chapter tabs joined to one panel ── */
.cp-jgrid { grid-template-columns: minmax(0, 1fr) !important; }
.cp-journey { container: cpj / inline-size; }
.cp-jh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.cp-jh .cp-jtitle { margin: 0 !important; color: var(--ink); }
.cp-jaside { font-size: 13px; font-weight: 600; color: var(--muted); }
@container cpj (min-width: 700px) { .cp-years { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); overflow: visible; padding-bottom: 12px; } }
.cp-yr { position: relative; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06); transition: transform .15s, box-shadow .15s, border-color .15s; align-items: flex-start; }
.cp-yr:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(15,23,42,.25); }
.cp-yr i { width: 28px; height: 28px; font-style: normal; font-weight: 800; font-size: 13px; background: color-mix(in srgb, var(--k) 12%, #fff); }
.cp-yr i svg { width: 15px; height: 15px; }
.cp-yr.on { border: 2px solid var(--k); background: linear-gradient(#fff, color-mix(in srgb, var(--k) 6%, #fff)); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--k) 80%, transparent); }
.cp-yr.on i { background: var(--k); color: #fff; }
.cp-yr-dest i { background: linear-gradient(160deg, #fde68a, #f59e0b) !important; color: #78350f !important; }
.cp-yr small { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
@container cpj (min-width: 700px) { .cp-yr.on::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff;
  border-right: 2px solid var(--k); border-bottom: 2px solid var(--k); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; } }
.cp-det { display: grid; gap: 14px; margin-top: 6px; }
.cp-dmain { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06); }
.cp-dmh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cp-dmh h3 { margin: 2px 0 0; font-size: 21px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); }
.cp-eyebrow { font-size: 11px; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; color: var(--k); }
.cp-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k); }
.cp-pill svg { width: 14px; height: 14px; }
.cp-dgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cp-dblock { background: linear-gradient(#fbfcfe, #f7f9fc); border: 1px solid #eef2f7; border-radius: 14px; padding: 12px 13px; min-width: 0; }
.cp-dblock h4, .cp-first h4, .cp-acccard h4 { margin: 0 0 6px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.cp-dblock h4 .dp-tile { width: 30px; height: 30px; border-radius: 9px; }
.cp-dblock h4 .dp-tile svg { width: 16px; height: 16px; }
.cp-dblock p { margin: 0; font-size: 14px; color: var(--text); }
.cp-skills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-skills-l { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.cp-dside { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cp-first { background: linear-gradient(160deg, color-mix(in srgb, var(--k) 9%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--k) 22%, var(--line));
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cp-first h4 { color: var(--k); }
.cp-first h4 svg { width: 16px; height: 16px; }
.cp-first p { margin: 0; font-size: 14px; color: var(--text); }
.cp-first .cp-btn { width: 100%; margin: 0; }
.cp-first .cp-jobs-btn { --cp: var(--k); color: #fff; text-decoration: none; }
.cp-first .cp-jobs-btn:hover { text-decoration: none; }
.cp-first .cp-jobs-btn svg { width: 16px; height: 16px; }
.cp-acccard { background: #fff; border: 1px solid #f5dfb8; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06); }
.cp-acccard h4 { color: #b45309; }
.cp-acccard h4 .dp-tile { width: 30px; height: 30px; border-radius: 9px; }
.cp-acccard h4 .dp-tile svg { width: 16px; height: 16px; }
.cp-acc-title { font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.cp-acccard .cp-ai-dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; font-size: 12.5px; }
.cp-acccard .cp-ai-dl dt { margin: 0; font-size: 12.5px; }
.cp-acccard .cp-ai-dl dd { margin: 0; font-size: 13px; }
.cp-acccard .cp-btn { align-self: flex-start; margin-top: auto; }

/* The bottom bar: your direction / choose, with Compare routes beside it. It sits
   after the route now instead of floating over the cards. */
.cp-cta { position: static !important; border-radius: 18px; border-color: color-mix(in srgb, var(--cp) 25%, var(--line)); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px -10px rgba(15,23,42,.25); }
.cp-cta-cmp { display: inline-flex !important; }
.cp-cta .cp-chosen { background: linear-gradient(180deg, color-mix(in srgb, var(--cp) 82%, #fff), var(--cp)); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -8px color-mix(in srgb, var(--cp) 80%, transparent); }

/* Description: 3 lines, then More / Less (2026-10-29, Nate). */
.cp-descw { display: grid; justify-items: start; gap: 0; }
.cp-rcard .cp-descw.open .cp-desc, .cp-descw.open .cp-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cp-more { background: none; border: 0; padding: 6px 2px; margin: -2px 0 -6px -2px; font: inherit; font-size: 13px; font-weight: 700; color: var(--k); cursor: pointer; border-radius: 6px; }
.cp-more:hover { text-decoration: underline; }
.cp-more:focus-visible { outline: 2px solid var(--k); outline-offset: 1px; }
.cp-more[hidden] { display: none; }
@media (max-width: 760px) {
  .cp-rev-arrow { display: none; }
  .cp-ring { height: 520px; }
  .cp-rcard { padding: 16px; gap: 10px; }
  .cp-rcard .cp-role { font-size: 22px; }
  .cp-fsec-aside { display: none; }
  /* 2026-10-29 (Nate): the whole card should fit on a phone screen.
     Stats become three slim rows, the two buttons sit side by side. */
  .cp-rcard { gap: 9px; }
  .cp-rcard .cp-desc { -webkit-line-clamp: 4; }
  .cp-rcard .cp-at > div { padding: 8px 9px; }
  .cp-rcard .cp-stats { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1px 12px; border: 1px solid #eef2f7; border-radius: 12px; background: linear-gradient(#fbfcfe, #f6f8fb); }
  .cp-rcard .cp-stats > div, .cp-rcard .cp-stats > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    grid-column: auto; padding: 6px 0; background: none; border: 0; border-radius: 0; }
  .cp-rcard .cp-stats > div:not(:first-child) { border-top: 1px solid #e9edf4; }
  .cp-rcard .cp-stats span { flex: 0 0 auto; font-size: 12px; }
  .cp-rcard .cp-stats b, .cp-rcard .cp-stats > div:last-child b { font-size: 14px; text-align: right; line-height: 1.25; overflow-wrap: normal; }
  .cp-rcard .cp-focus-btns { flex-wrap: nowrap; gap: 8px; container: cpb / inline-size; }
  .cp-rcard .cp-focus-btns .cp-btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; gap: 6px; font-size: 13px; white-space: nowrap; }
  .cp-rcard .cp-focus-btns .cp-btn svg { width: 15px; height: 15px; }
  .cp-rcard .cp-focus-btns .cp-card-choose { flex-grow: 1.6; }
}
/* Narrower phones: Compare drops its icon first, then "Choose this direction"
   shortens to "Choose", so the two buttons always fit side by side. */
@container cpb (max-width: 288px) { .cp-focus-btns .cp-btn-out svg { display: none; } }
@container cpb (max-width: 267px) { .cp-btn-more { display: none; } .cp-focus-btns .cp-btn-out svg { display: block; } }
@media (prefers-reduced-motion: reduce) { .cp-btn, .cp-yr, .cp-go, .cp-dotb { transition: none; } .cp-btn:hover, .cp-yr:hover { transform: none !important; } }
.cp-other-phone summary .cp-other-sic svg { color: #fff; width: 18px; height: 18px; transform: none !important; }

/* ── Career Paths v3 (audit/career_paths_v3_plan.md): "Not for me" ── */
.cp-nfm { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2, #e3e8f0); background: #fff; color: var(--muted, #64748b);
  border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; }
.cp-nfm:hover, .cp-nfm:focus-visible { color: #b91c1c; border-color: #fecaca; background: #fff5f5; }
.cp-nfm svg { width: 12px; height: 12px; }
.cp-x45 { transform: rotate(45deg); }
.cp-new { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; letter-spacing: 0; text-transform: none; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 9px; }
.cp-new svg { width: 12px; height: 12px; }
.cp-now + .cp-nfm, .cp-new + .cp-nfm { margin-left: auto; }
.cp-swapbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13.5px; }
.cp-swapbar > svg { width: 16px; height: 16px; flex: none; }
.cp-swapbar b { color: #78350f; }
.cp-swapbar .cp-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cp-swapbar .cp-btn svg { width: 14px; height: 14px; }
.cp-swap-h { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--k-soft); margin-bottom: 10px; }
.cp-swap-h small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k); }
.cp-swap-h b { display: block; font-size: 15.5px; color: var(--ink); }
.cp-rchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.cp-rchip { border: 1px solid var(--line-2, #e3e8f0); background: #fff; border-radius: 999px; padding: 8px 13px; font: inherit; font-weight: 650; font-size: 13px; color: var(--ink); cursor: pointer; min-height: 38px; }
.cp-rchip[aria-pressed="true"] { background: var(--cp); border-color: var(--cp); color: #fff; box-shadow: 0 6px 14px -8px var(--cp); }
.cp-swap-note { display: flex; gap: 8px; align-items: flex-start; background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
.cp-swap-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cp-swapbar > span { flex: 1 1 180px; min-width: 0; }
/* Keep it + Undo (kit test pass K1, 2026-11-01) */
.cp-swapbar > span.cp-swapbar-acts { flex: none; display: inline-flex; gap: 8px; margin-left: auto; }
.cp-swapbar-acts .cp-btn { margin-left: 0; }
@media (max-width: 600px) { .cp-swapbar { padding: 10px 12px; font-size: 13px; gap: 8px; } }

/* ── Career Paths v3: the Discovery quiz ── */
.cp-dlg.cp-dlg-quiz { width: min(760px, calc(100vw - 32px)); }
@media (max-width: 600px) {
  .cp-dlg.cp-dlg-quiz { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 16px; }
}
.cpq-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.cpq-bar { height: 8px; border-radius: 99px; background: #eef2f7; overflow: hidden; margin-bottom: 14px; }
.cpq-bar i { display: block; height: 8px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--cp) 60%, #fff), var(--cp)); transition: width .25s; }
.cpq-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.cpq-h h3 { margin: 0; font-size: 19px; font-weight: 850; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.cpq-eyb { display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cp); }
.cpq-teal { color: #0f766e; } .cpq-amber { color: #b45309; }
.cpq-steps { display: grid; gap: 8px; margin: 4px 0 10px; }
.cpq-steps > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--cp-soft); font-size: 13.5px; }
.cpq-steps b { display: block; color: var(--ink); } .cpq-steps small { color: var(--muted); }
.cpq-credit { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.cpq-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 14px; border-radius: 20px; margin-bottom: 12px; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--cp-soft), #fff 70%); border: 1px solid var(--cp-line, #ddd6fe); }
.cpq-card h3 { margin: 0; font-size: 21px; font-weight: 850; color: var(--ink); text-wrap: balance; }
.cpq-card p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 46ch; }
.cpq-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cpq-scale button { display: grid; justify-items: center; gap: 6px; border: 1px solid var(--line-2, #e3e8f0); background: #fff; border-radius: 14px; padding: 10px 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1.2; min-height: 72px; }
.cpq-scale button i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 850; font-size: 14px; color: #fff; }
.cpq-scale button:nth-child(1) i { background: #dc2626; } .cpq-scale button:nth-child(2) i { background: #f97316; } .cpq-scale button:nth-child(3) i { background: #94a3b8; }
.cpq-scale button:nth-child(4) i { background: #22c55e; } .cpq-scale button:nth-child(5) i { background: #15803d; }
.cpq-scale button:hover, .cpq-scale button:focus-visible { border-color: var(--cp); }
.cpq-scale button[aria-pressed="true"] { border-color: var(--cp); box-shadow: 0 0 0 2px var(--cp-soft); }
@media (max-width: 600px) {
  .cpq-scale { grid-template-columns: minmax(0, 1fr); }
  .cpq-scale button { grid-template-columns: 28px 1fr; justify-items: start; text-align: left; font-size: 14px; padding: 10px 12px; align-items: center; min-height: 52px; }
}
.cpq-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cpq-skip { color: var(--muted) !important; }
.cpq-rec { display: flex; gap: 7px; align-items: center; justify-content: center; margin: 10px 0 0; font-size: 12.5px; font-weight: 650; color: #92400e; text-align: center; }
.cpq-rec svg { width: 14px; height: 14px; flex: none; color: #d97706; }
.cpq-center { justify-content: center; } .cpq-center-t { text-align: center; }
.cpq-half { padding: 30px 14px; }
.cpq-lean { background: #fff; border: 1px solid var(--line-2, #e3e8f0); border-radius: 999px; padding: 6px 12px; color: var(--ink) !important; }
.cpq-conf { position: absolute; inset: 0; pointer-events: none; }
.cpq-conf i { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; animation: cpqc 2.2s ease-in infinite; background: #f59e0b; }
.cpq-conf i:nth-child(even) { background: var(--cp); } .cpq-conf i:nth-child(3n) { background: #22c55e; }
.cpq-conf i:nth-child(1){left:7%}.cpq-conf i:nth-child(2){left:14%;animation-delay:.3s}.cpq-conf i:nth-child(3){left:21%;animation-delay:.6s}.cpq-conf i:nth-child(4){left:28%;animation-delay:.9s}
.cpq-conf i:nth-child(5){left:35%;animation-delay:1.2s}.cpq-conf i:nth-child(6){left:42%;animation-delay:1.5s}.cpq-conf i:nth-child(7){left:49%;animation-delay:1.8s}.cpq-conf i:nth-child(8){left:56%}
.cpq-conf i:nth-child(9){left:63%;animation-delay:.3s}.cpq-conf i:nth-child(10){left:70%;animation-delay:.6s}.cpq-conf i:nth-child(11){left:77%;animation-delay:.9s}.cpq-conf i:nth-child(12){left:84%;animation-delay:1.2s}
.cpq-conf i:nth-child(13){left:91%;animation-delay:1.5s}.cpq-conf i:nth-child(14){left:97%;animation-delay:1.8s}
@keyframes cpqc { to { transform: translateY(260px) rotate(320deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .cpq-conf { display: none; } }
.cpq-warncard { background: radial-gradient(120% 120% at 50% 0%, #fffbeb, #fff 70%); border-color: #fde4b0; }
.cpq-warncard p { color: var(--text, #334155); }
.cpq-tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 2px 0 12px; }
.cpq-tcard { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line-2, #e3e8f0); background: #fff; border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink); min-height: 56px; }
.cpq-tcard b { display: block; font-size: 13.5px; } .cpq-tcard small { display: block; font-size: 12px; color: var(--muted); }
.cpq-tcard[aria-pressed="true"] { border-color: var(--cp); background: var(--cp-soft); box-shadow: 0 0 0 2px var(--cp-soft); }
.cpq-tcard:disabled { opacity: .55; cursor: default; }
.cpq-sumbtns .cpq-tcard[aria-pressed="true"] { border-color: #0f766e; background: #f0fdfa; box-shadow: 0 0 0 2px rgba(15, 118, 110, .18); }
.cpq-sum { padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, #f0fdfa, #fff); border: 1px solid #c9eee6; display: grid; gap: 8px; margin-bottom: 12px; }
.cpq-sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cpq-sum li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.cpq-sum li svg { width: 16px; height: 16px; flex: none; color: #0f766e; margin-top: 2px; }
.cpq-sum small { font-size: 11.5px; color: var(--muted); }
.cpq-ta { min-height: 64px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.cpq-prompts { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: #f8fafc; }
.cpq-prompt { display: grid; gap: 8px; }
.cpq-prompt-h { display: flex; gap: 10px; align-items: center; }
.cpq-prompt-h b { font-size: 14px; color: var(--ink); }
.cpq-load { display: grid; justify-items: center; gap: 10px; padding: 30px 0; text-align: center; }
.cpq-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--cp-soft); border-top-color: var(--cp); animation: cpqs .9s linear infinite; }
@keyframes cpqs { to { transform: rotate(360deg); } }
.cpq-prof { display: grid; gap: 7px; margin: 4px 0 14px; }
.cpq-prow { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.cpq-prow b { font-weight: 750; color: var(--ink); } .cpq-prow small { display: block; font-size: 11px; color: var(--muted); }
.cpq-meter { height: 10px; border-radius: 99px; background: #eef2f7; overflow: hidden; }
.cpq-meter i { display: block; height: 10px; border-radius: inherit; background: #cbd5e1; }
.cpq-top2 .cpq-meter i { background: linear-gradient(90deg, color-mix(in srgb, var(--cp) 55%, #fff), var(--cp)); }
.cpq-p1box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--cp-soft); border: 1px dashed var(--cp-line, #c4b5fd); margin-bottom: 12px; }
.cpq-p1box > div { flex: 1 1 240px; } .cpq-p1box b { display: block; font-size: 14px; color: var(--ink); } .cpq-p1box span { font-size: 12.5px; color: var(--text, #334155); }
.cpq-ml { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 6px 0 10px; }
.cpq-m { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2, #e3e8f0); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06); align-content: start; }
.cpq-chip.cpq-est { background: #fef3c7; color: #92400e; }
.cpq-mt { display: flex; gap: 10px; align-items: center; } .cpq-mt b { font-size: 15px; line-height: 1.25; color: var(--ink); }
.cpq-m p { margin: 0; font-size: 13px; color: var(--text, #334155); }
.cpq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cpq-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; background: #f1f5f9; color: var(--text, #334155); }
.cpq-chip svg { width: 13px; height: 13px; } .cpq-good { background: #e9f8ee; color: #15803d; } .cpq-cp { background: var(--cp-soft); color: var(--cp); }
.cpq-mb { display: flex; gap: 6px; flex-wrap: wrap; } .cpq-mb .cp-btn { display: inline-flex; align-items: center; gap: 6px; } .cpq-mb .cp-btn svg { width: 14px; height: 14px; }
.cpq-wild { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #fffbeb, #fff); border: 1px solid #fde4b0; margin: 6px 0 10px; }
.cpq-w { border-color: #fde4b0; }
.cpq-wchip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; background: #fdf3d8; color: #8a5a00; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cpq-wchip svg { width: 12px; height: 12px; }
.cpq-pick { display: grid; gap: 8px; margin: 6px 0; }
.cpq-mb .cp-btn { width: auto; flex: 0 1 auto; }
@media (max-width: 600px) { .cpq-ten { grid-template-columns: minmax(0, 1fr); } }
.cpq-mb .cp-btn { padding: 0 11px; font-size: 13px; min-height: 36px; gap: 6px; }

/* ── Saved routes (audit/saved_routes_plan.md, 2026-10-31) ── */
.cp-head-btns { display: flex; align-items: center; gap: 10px; flex: none; }
.cp-head-saved { gap: 8px; }
.cp-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cp); color: #fff; font-size: 12.5px; font-weight: 800;
  display: inline-grid; place-items: center; line-height: 1; }
.cp-count[hidden] { display: none; }
.cp-save.on, .cp-sr-save.on { color: var(--cp-ink, #1e3a8a); border-color: var(--cp-line, #c7d2fe); background: var(--cp-soft, #eef2ff); }
.cp-save.on svg .duo, .cp-sr-save.on svg .duo { fill: currentColor; opacity: 1; }
.cp-dlg-saved { width: min(620px, calc(100vw - 32px)); }
.cp-sr-sec { margin-top: 14px; }
.cp-sr-h { display: flex; align-items: center; gap: 8px; font-size: 15px !important; font-weight: 800; color: var(--ink); margin: 0 0 10px !important; }
.cp-sr-h svg { width: 18px; height: 18px; color: var(--cp); }
.cp-sr-n { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cp-sr { border: 1px solid var(--line-2, #e3e8f0); border-left: 4px solid var(--k); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.cp-sr-top { display: flex; align-items: flex-start; gap: 10px; }
.cp-sr-t { min-width: 0; }
.cp-sr-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k); }
.cp-sr-t b { display: block; font-size: 16px; color: var(--ink); line-height: 1.3; margin-top: 2px; }
.cp-sr-chip { font-size: 11px; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 2px 8px; background: var(--k-soft); color: var(--k); }
.cp-sr-stats { font-size: 13.5px; color: var(--text); margin-top: 8px !important; }
.cp-sr-why { font-size: 12.5px; color: var(--muted); margin-top: 3px !important; }
.cp-sr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-sr-acts .cp-btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
.cp-sr-acts .cp-btn svg { width: 15px; height: 15px; }
.cp-sr-rm { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.cp-sr-note { margin-top: 8px !important; }
.cp-sr-empty { padding: 12px 14px; border: 1px dashed var(--line-2, #e3e8f0); border-radius: 12px; }
@media (max-width: 760px) {
  .cp-head-btns { align-self: flex-start; }
  .cp-head-saved { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .cp-dlg-saved { padding: 18px 16px; }
}
/* Saved routes: the card's buttons stay on one row at every width (Choose,
   Compare, Save), the same way the phone layout already does it. */
.cp-rcard .cp-focus-btns { flex-wrap: nowrap; container: cpb / inline-size; }
.cp-rcard .cp-focus-btns .cp-btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; gap: 6px; white-space: nowrap; }
.cp-rcard .cp-focus-btns .cp-card-choose { flex-grow: 1.6; }
.cp-rcard .cp-focus-btns .cp-save { flex: 0 1 auto; }
@container cpb (max-width: 330px) { .cp-rcard .cp-btn-more { display: none; } .cp-rcard .cp-focus-btns .cp-btn-out svg { display: block; } }
@container cpb (max-width: 230px) { .cp-rcard .cp-focus-btns .cp-btn svg { display: none; } }

/* Save animation (animation_notes.md, 2026-10-31): the flying copy of the card,
   and the Saved routes button's bump when it lands. */
.cp-ghost { box-shadow: 0 30px 60px -20px rgba(7, 26, 66, .45) !important; overflow: hidden; will-change: transform, opacity; }
@keyframes cpBump { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 55% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes cpCountPop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.cp-head-saved.cp-bump { animation: cpBump .55s cubic-bezier(.3,1.4,.5,1); border-color: var(--cp); box-shadow: 0 0 0 4px var(--cp-soft, #eef2ff); }
.cp-head-saved.cp-bump .cp-count { animation: cpCountPop .55s ease-out; }
@media (prefers-reduced-motion: reduce) { .cp-head-saved.cp-bump, .cp-head-saved.cp-bump .cp-count { animation: none; } }

/* Kit test pass K3: the direction is a different job from the kit's. */
.cp-fitbar { margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 14px; }
.cp-fitbar-h { display: block; font-size: 15px; color: #172554; margin-bottom: 4px; }
.cp-fitbar p { margin: 0 0 10px; line-height: 1.45; }
.cp-fitbar b { color: #172554; }
.cp-fitbar-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cp-fitbar-acts .cp-btn { margin: 0; max-width: 100%; white-space: normal; text-align: center; }
.cp-fitbar .cp-fitbar-note { margin: 0; font-size: 12.5px; color: #475569; }
@media (max-width: 600px) { .cp-fitbar { padding: 12px; font-size: 13.5px; } .cp-fitbar-acts .cp-btn { flex: 1 1 100%; } }