/* BA → PM transition — the 'new' arm of the transition experiment.
 *
 * Scoped under .tr so it cannot reach the old arm, which is still served the
 * page's own stylesheet. A few .cp-* names are restyled here because the page's
 * inline script binds to them; see the header of includes/sections/transition-new.php.
 *
 * Every colour is stated outright — design-system.css styles bare elements
 * (p, h1..h6, a) and an element rule beats an inherited value. */

.tr{
  --tr-ink:#0a0a0a; --tr-paper:#fff; --tr-dim:#5c626b; --tr-lab:#6b7280;
  --tr-hair:#e6e6e6; --tr-blue:#1a3aff; --tr-green:#0f7a4a;
  --tr-pad:clamp(20px,5vw,64px);
  background:var(--tr-paper); color:var(--tr-ink);
}
.tr *{box-sizing:border-box}
.tr-in{max-width:1180px;margin:0 auto;padding:0 var(--tr-pad)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.tr-hero{background:var(--tr-blue);color:#fff;padding:clamp(44px,7vw,84px) 0}
.tr-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.82)}
/* 1.08: "Manager." and "Việt" stack tone marks and this is the first value with
   no collision at the top of the clamp. */
.tr-h1{font-size:clamp(31px,5.6vw,68px);line-height:1.08;letter-spacing:-.045em;font-weight:800;
  margin:16px 0 0;max-width:18ch;color:#fff}
.tr-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.5;margin:22px 0 0;max-width:60ch;
  color:rgba(255,255,255,.9)}
.tr-lead b{color:#fff;font-weight:700}

.tr-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.tr-btn{display:inline-block;font-size:13.5px;font-weight:800;text-decoration:none;
  padding:13px 22px;border:2px solid currentColor;border-radius:0;white-space:nowrap;
  line-height:1.2;cursor:pointer;font-family:inherit}
.tr-btn-solid{background:#fff;color:var(--tr-ink);border-color:#fff}
.tr-btn-solid:hover{background:#f0f0f0;color:var(--tr-ink);text-decoration:none}
.tr-btn-ghost{background:transparent;color:#fff}
.tr-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.tr-btn-on{background:var(--tr-ink);color:#fff;border-color:var(--tr-ink)}
.tr-btn-on:hover{background:#252525;color:#fff;text-decoration:none}

/* the four rungs — a ladder, because each sits on the one before it */
.tr-stack{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.3);
  margin-top:clamp(30px,4vw,52px)}
@media (min-width:700px){ .tr-stack{grid-template-columns:repeat(4,1fr)} }
.tr-rung{padding:18px 0 20px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:700px){
  .tr-rung{border-bottom:0;border-left:1px solid rgba(255,255,255,.3);padding-left:22px}
  .tr-rung:first-child{border-left:0;padding-left:0}
}
.tr-rung > b{display:block;font-size:clamp(26px,3.4vw,40px);line-height:.95;font-weight:800;
  letter-spacing:-.04em;color:#fff}
.tr-rung > span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.78);margin-top:9px}

/* ── section nav (ids owned by the page's inline script) ─────────────────── */
.tr-nav{position:sticky;z-index:30;display:flex;gap:0;overflow-x:auto;background:var(--tr-paper);
  border-bottom:2px solid var(--tr-ink);scrollbar-width:none}
.tr-nav::-webkit-scrollbar{display:none}
.tr-nav a{flex:0 0 auto;white-space:nowrap;text-decoration:none;padding:13px 18px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:var(--tr-ink);border-right:1px solid var(--tr-hair)}
.tr-nav a:last-child{border-right:0}
.tr-nav a:hover{background:var(--tr-ink);color:#fff;text-decoration:none}

/* ── body ───────────────────────────────────────────────────────────────── */
.tr-body{padding:clamp(38px,6vw,72px) 0 0}
.tr-sec{margin-bottom:clamp(42px,6vw,76px)}
.tr-h2{font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:800;
  margin:0 0 10px;color:var(--tr-ink)}
.tr-sub{font-size:15px;line-height:1.55;color:var(--tr-dim);margin:0 0 24px;max-width:70ch}
.tr-sub b{color:var(--tr-ink)}

/* ── phases ─────────────────────────────────────────────────────────────── */
.tr-phases{border-top:2px solid var(--tr-ink)}
/* career-roadmap.css still loads on this page and gives .cp-phase-card
   `border:1px solid var(--border)` + `border-radius:var(--radius-md)` via a
   grouped selector. Setting only border-bottom here overrode one edge and left
   a rounded grey box on three — the four phases were the one thing on the page
   still wearing the old card look. Reset the box, then draw the divider. */
.tr .cp-phase-card{border:0;border-radius:0;background:none;box-shadow:none;
  border-bottom:1px solid var(--tr-hair)}
.tr .cp-phase-card:last-child{border-bottom:2px solid var(--tr-ink)}
.tr .cp-phase-head{display:flex;align-items:flex-start;gap:15px;width:100%;text-align:left;
  background:none;border:0;padding:22px 0 24px;font:inherit;color:inherit;cursor:pointer}
.tr .cp-phase-head:hover .tr-phase-t{text-decoration:underline;text-underline-offset:3px}
.tr-phase-n{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--tr-ink);color:#fff;font-size:13px;font-weight:800}
.tr-phase-main{flex:1 1 auto;min-width:0}
.tr-phase-lab{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--tr-lab)}
.tr-phase-t{display:block;font-size:clamp(17px,2vw,23px);font-weight:800;letter-spacing:-.02em;
  line-height:1.25;margin-top:5px;color:var(--tr-ink)}
.tr-phase-o{display:block;font-size:14px;line-height:1.55;color:var(--tr-dim);margin-top:7px;
  max-width:62ch}
.tr-chev{flex:0 0 auto;margin-top:6px;font-size:12px;color:var(--tr-lab);transition:transform .18s ease}
.tr .cp-phase-head[aria-expanded="true"] .tr-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .tr-chev{transition:none} }

/* The script toggles .is-open on phones; above 640px the body stays open, which
   is the behaviour the old arm has and the reason the toggle is harmless there. */
.tr .cp-phase-body{display:none;padding:0 0 24px 43px}
.tr .cp-phase-card.is-open .cp-phase-body{display:block}
@media (min-width:641px){ .tr .cp-phase-body{display:block} }
.tr-phase-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--tr-lab);margin-bottom:9px}
.tr .tr-list{margin:0;padding-left:17px;display:grid;gap:7px}
.tr .tr-list li{font-size:14px;line-height:1.5;color:var(--tr-dim)}
.tr .tr-list a{color:var(--tr-blue);font-weight:700;text-decoration:none}
.tr .tr-list a:hover{text-decoration:underline;text-underline-offset:3px}
.tr-proof{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--tr-hair);
  font-size:13.5px;color:var(--tr-dim)}
.tr-proof b{color:var(--tr-ink);font-weight:800}

/* ── panels ─────────────────────────────────────────────────────────────── */
.tr-panel{border:2px solid var(--tr-ink);padding:24px 26px;display:flex;gap:22px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.tr-panel-cta{border-left-width:10px;border-left-color:var(--tr-blue)}
.tr-panel-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--tr-lab)}
.tr-panel-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;margin:8px 0 0;color:var(--tr-ink)}
.tr-panel-p{font-size:14px;line-height:1.55;color:var(--tr-dim);margin:9px 0 0;max-width:64ch}

/* ── learn / prove grid ─────────────────────────────────────────────────── */
.tr-learn{display:grid;grid-template-columns:1fr;border:2px solid var(--tr-ink)}
@media (min-width:640px){ .tr-learn{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .tr-learn{grid-template-columns:repeat(4,1fr)} }
.tr-learn-c{padding:20px 22px;border-bottom:1px solid var(--tr-hair)}
.tr-learn-c:last-child{border-bottom:0}
@media (min-width:640px){
  .tr-learn-c{border-right:1px solid var(--tr-hair)}
  .tr-learn-c:nth-child(2n){border-right:0}
  .tr-learn-c:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1000px){
  .tr-learn-c{border-right:1px solid var(--tr-hair);border-bottom:0}
  .tr-learn-c:nth-child(2n){border-right:1px solid var(--tr-hair)}
  .tr-learn-c:last-child{border-right:0}
}
.tr-learn-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--tr-ink)}
.tr-learn-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--tr-dim)}

/* ── course sequence ────────────────────────────────────────────────────── */
.tr-seq{border-top:2px solid var(--tr-ink)}
.tr-seq-r{display:flex;align-items:center;gap:14px;padding:15px 0;text-decoration:none;
  border-bottom:1px solid var(--tr-hair);color:var(--tr-ink)}
.tr-seq-r:last-child{border-bottom:2px solid var(--tr-ink)}
.tr-seq-r:hover{background:#f6f6f6;text-decoration:none;color:var(--tr-ink)}
.tr-seq-n{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;background:#f2f2f2;color:var(--tr-ink);font-size:12px;font-weight:800}
.tr-seq-b{flex:1 1 auto;min-width:0}
.tr-seq-b b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tr-seq-b span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--tr-lab);margin-top:3px}
.tr-seq-go{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--tr-lab)}
.tr-seq-r:hover .tr-seq-go{color:var(--tr-ink)}

/* ── what next ──────────────────────────────────────────────────────────── */
.tr-next{display:grid;grid-template-columns:1fr;border:2px solid var(--tr-ink)}
@media (min-width:820px){ .tr-next{grid-template-columns:repeat(3,1fr)} }
.tr-next-c{display:block;padding:20px 22px;text-decoration:none;color:var(--tr-ink);
  border-bottom:1px solid var(--tr-hair)}
.tr-next-c:last-child{border-bottom:0}
@media (min-width:820px){
  .tr-next-c{border-right:1px solid var(--tr-hair);border-bottom:0}
  .tr-next-c:last-child{border-right:0}
}
.tr-next-c:hover{background:#f6f6f6;text-decoration:none;color:var(--tr-ink)}
.tr-next-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.tr-next-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--tr-dim)}

/* ── closing strip ──────────────────────────────────────────────────────── */
.tr-strip{background:var(--tr-green);color:#fff;padding:clamp(34px,5vw,60px) 0}
.tr-strip-in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tr-strip-t{font-size:clamp(20px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin:0;color:#fff}
.tr-strip-s{font-size:14.5px;line-height:1.55;margin:9px 0 0;color:rgba(255,255,255,.9);max-width:60ch}
.tr-strip .tr-btn-on{background:#fff;color:var(--tr-ink);border-color:#fff}
.tr-strip .tr-btn-on:hover{background:#eee;color:var(--tr-ink)}

/* ── old-stylesheet leftovers inside the phases ──────────────────────────────
   The markup carries both the old cp-* classes and the new tr-* ones, so
   anything career-roadmap.css styles that this file does not restate keeps the
   old look. Found by reading computed styles on the rendered page, not by
   guessing at names. */

/* The tick was --primary (#2563EB), the old blue, next to links in the new
   #1a3aff. Two blues one shade apart read as a mistake rather than a palette. */
.tr .cp-check-list li::before{color:var(--tr-blue)}
.tr .cp-check-list li{font-size:14px;line-height:1.5;color:var(--tr-dim)}

/* Skill links kept a pale-blue dotted underline (#dbeafe) from the old sheet —
   invisible at small sizes and off-palette where it did show. */
.tr .cp-inline-skill-link{border-bottom:0;text-decoration:none;color:var(--tr-blue);
  font-weight:700}
.tr .cp-inline-skill-link:hover{border-bottom:0;color:var(--tr-ink);
  text-decoration:underline;text-underline-offset:3px}

/* Anchor targets sit under BOTH sticky bars — the flat header (--cf-h, published
   by chrome-flat.css) and .cp-nav below it. Without this a nav click landed the
   heading at top:0, fully hidden behind 130px of chrome. */
.tr #cp-phases,.tr #cp-learn,.tr #cp-courses{scroll-margin-top:calc(var(--cf-h,75px) + 62px)}

/* No shadows in this design; the old sheet adds one once the nav sticks. */
.tr .cp-nav.is-stuck{box-shadow:none;border-bottom:2px solid var(--tr-ink)}