/* ---------------------------------------------------------------------------
   The Full Picture -- True Path
   A faithful port of the APPROVED standalone stylesheet (true-path.html), scoped
   to #true-path-app so the rest of the site is untouched.

   - Short canonical class names (.btn .opt .lk .grid .pulse .pg ...) are kept
     exactly as approved; the journey markup relies on them.
   - Inter for the app and Cormorant Garamond for its headings; the site shell
     keeps DM Sans. Design tokens are echoed from the site.
   - Focus, reduced-motion and print behaviour are identical to the reference.
   --------------------------------------------------------------------------- */

#true-path-app {--bg:#141212;--card:#211c1c;--line:#3d3434;--ink:#f3ecdf;--mut:#b8ad9d;--bur:#7a1f2e;--bur2:#b04458;--gold:#a8823f;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#true-path-app *, #true-path-app *:before, #true-path-app *:after {box-sizing:inherit}
#true-path-app {margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}
#true-path-app {position:relative;isolation:isolate;background-color:#141212;background-image:radial-gradient(ellipse 1100px 560px at 72% -8%, rgba(113,1,1,.28), transparent 62%)}
/* Ambient watermark glyph, echoing the hero-mark treatment on the tool pages. */
#true-path-app:before {content:'道';position:fixed;right:-3vw;bottom:-8vw;z-index:-1;font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(16rem,34vw,32rem);line-height:1;color:rgba(113,1,1,.16);pointer-events:none;user-select:none}
@media print {#true-path-app:before {display:none}}
#true-path-app > #tp-step-root, #true-path-app > #tp-report-root {max-width:640px;margin:0 auto;padding:20px 20px 60px}
/* Centre shorter journey steps in the viewport; long steps degrade to normal top flow. */
#true-path-app > #tp-step-root {min-height:calc(100svh - 140px);display:flex;flex-direction:column}
#true-path-app > #tp-step-root:before {content:'';margin-top:auto}
#true-path-app > #tp-step-root:after {content:'';margin-bottom:auto}
#true-path-app h1, #true-path-app h2, #true-path-app h3 {font-family:"Cormorant Garamond",Georgia,"Songti SC","Noto Serif CJK SC",serif;font-weight:600;line-height:1.15;margin:.4em 0 .3em}
#true-path-app h1 {font-size:2.6rem}
#true-path-app h2 {font-size:1.75rem}
#true-path-app h3 {font-size:1.25rem;color:var(--gold)}
#true-path-app p {margin:.5em 0}
#true-path-app .mut {color:var(--mut);font-size:.92rem}
#true-path-app .cn {font-family:"Songti SC","Noto Serif CJK SC",serif}
#true-path-app .btn, #true-path-app .opt, #true-path-app .ghost {font:inherit;color:var(--ink);cursor:pointer;border-radius:8px}
#true-path-app .btn {background:var(--bur);border:1px solid var(--bur2);padding:14px 22px;font-weight:600;margin:18px 0 6px;display:inline-block;text-decoration:none}
#true-path-app .btn:hover {background:var(--bur2)}
#true-path-app .btn:disabled {opacity:.4;cursor:default}
#true-path-app .ghost {background:none;border:0;color:var(--mut);padding:8px 0;margin-top:10px}
#true-path-app .opt {background:var(--card);border:1px solid var(--line);padding:14px 16px;text-align:left;width:100%;position:relative}
#true-path-app .opt.on {border-color:var(--gold);background:#2c2222}
#true-path-app .opt:hover {border-color:var(--mut)}
#true-path-app :focus-visible {outline:2px solid var(--gold);outline-offset:2px}
#true-path-app .lk {display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}
#true-path-app .lk .opt {text-align:center;padding:16px 0}
#true-path-app .lkl {display:flex;justify-content:space-between;font-size:.8rem;color:var(--mut);margin-top:6px}
#true-path-app .grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
#true-path-app .stack {display:grid;gap:10px;margin-top:16px}
#true-path-app .sug {position:absolute;top:-8px;right:8px;background:var(--gold);color:#141212;font-size:.68rem;font-weight:600;padding:1px 8px;border-radius:9px}
#true-path-app .glyph {color:var(--gold);font-size:1.3rem;margin-right:8px}
#true-path-app .prog {display:flex;gap:6px;margin-bottom:22px}
#true-path-app .prog div {flex:1;font-size:.78rem;color:var(--mut);border-top:3px solid var(--line);padding-top:5px}
#true-path-app .prog .on {border-color:var(--gold);color:var(--ink)}
#true-path-app .chips {display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
#true-path-app .chip {border:1px solid var(--line);border-radius:14px;padding:3px 12px;font-size:.88rem;background:var(--card)}
#true-path-app .blk {border-top:1px solid var(--line);margin-top:26px;padding-top:6px}
#true-path-app .box {background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:12px 16px;margin:12px 0}
#true-path-app svg {width:100%;height:auto;display:block;max-width:420px;margin:8px auto}
#true-path-app .grow {transform-origin:150px 159px;animation:g 1.1s ease-out}
@keyframes g {from{transform:scale(0)}}
#true-path-app .tag {display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:12px;padding:1px 12px;font-size:.82rem;margin:0 6px 6px 0}
#true-path-app details {margin-top:12px;color:var(--mut)}
#true-path-app .info {margin:0}
#true-path-app .info summary {list-style:none;width:24px;height:24px;border:1px solid var(--mut);border-radius:50%;text-align:center;font:italic 14px/22px Georgia,serif}
#true-path-app .info[open] {margin-bottom:8px}
#true-path-app summary {cursor:pointer}
#true-path-app .pulse {position:fixed;inset:0;z-index:5;background:var(--bg);display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.8rem;animation:p 1.2s ease-in-out infinite alternate}
@keyframes p {from{opacity:.35}}
#true-path-app .opt {min-height:44px}
#true-path-app .br {transform-origin:130px 150px;animation:g 1.1s ease-out}
#true-path-app .inp {width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;margin:6px 0}
#true-path-app .pg {border-top:1px solid var(--line);margin-top:30px}
@media print {
#true-path-app {--bg:#fff;--card:#fff;--line:#ccc;--ink:#111;--mut:#555;padding:0}
#true-path-app .nop {display:none}
#true-path-app .pg {break-after:page;break-inside:avoid;border:0;margin:0;padding:0}
#true-path-app .pg:last-child {break-after:auto}
#true-path-app svg text {fill:#111!important}
#true-path-app .grow, #true-path-app .br {animation:none!important}
#true-path-app .info, #true-path-app .prog {display:none}
#true-path-app {font-size:11.5px;line-height:1.45}
#true-path-app h2 {font-size:1.4rem}
#true-path-app svg {max-width:260px}
#true-path-app {height:auto;background:#fff}
#true-path-app > #tp-step-root, #true-path-app > #tp-report-root {max-width:none;padding:0}
#true-path-app .pg:last-child {margin-bottom:0;padding-bottom:0}}
@page {margin:12mm}
@media (prefers-reduced-motion:reduce) {
#true-path-app * {animation:none!important}}
@media (max-width:420px) {
#true-path-app .grid {grid-template-columns:1fr}
#true-path-app h1 {font-size:2.2rem}}

/* ===========================================================================
   Integration layer (added by the production port). Everything above is the
   approved stylesheet, scoped to #true-path-app. Everything below is what the
   same markup needs once it lives inside the site shell instead of standing
   alone. No values from the approved design are changed here.
   =========================================================================== */

/* The app is one column, as approved; the site's fixed navbar floats above it,
   so the journey starts clear of the bar at every width. */
#true-path-app {
  display: block;
  padding-top: 120px;
  background-color: var(--bg);
  color: var(--ink);
  font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) {
  #true-path-app { padding-top: 96px; }
}
@media (max-width: 640px) {
  #true-path-app { padding-top: 84px; }
}

/* Boot window: the shell's static journey markup ships for SEO, but its controls only come
   alive once the config fetch finishes and the app binds. Until then say so, and keep the
   dead controls from swallowing clicks that were never going to do anything. */
#true-path-app[data-tp-booting] #tp-step-root { pointer-events: none; opacity: .55; transition: opacity .2s; cursor: progress; }
#true-path-app[data-tp-booting] #tp-step-root:after {
  content: 'Loading your journey…';
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: .9rem;
  color: var(--mut);
}

/* The synthesis pulse covers the whole viewport -- including the site navbar --
   for its 2600ms. Approved behaviour: nothing is half-updated, and the only
   thing clickable underneath is nothing at all. */
#true-path-app .pulse { z-index: 9999; }

/* Without JavaScript (or if the app cannot load) these carry the page. */
#true-path-app .tp-section { padding: 40px 0 60px; }
#true-path-app .tp-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }
#true-path-app .tp-center { text-align: center; }
#true-path-app .tp-h1 { font-family: "Cormorant Garamond", Georgia, "Songti SC", serif; font-size: 2.4rem; margin: .4em 0 .3em; }
#true-path-app .tp-lead { color: var(--mut); font-size: 1.02rem; }
#true-path-app .tp-btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
#true-path-app .tp-btn {
  display: inline-block; background: var(--bur); border: 1px solid var(--bur2);
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 14px 22px; margin: 18px 0 6px; text-decoration: none;
}
#true-path-app .tp-btn:hover { background: var(--bur2); }
#true-path-app .tp-btn--gold { background: var(--gold); border-color: var(--gold); color: #141212; }
#true-path-app .tp-btn--gold:hover { background: #bd9750; }
#true-path-app .tp-btn--ghost { background: none; border-color: var(--line); color: var(--mut); }
#true-path-app .tp-btn--ghost:hover { background: none; color: var(--ink); }

/* A product with no configured offer is shown disabled and honest rather than
   as a dead link. It is still a real element, so it is still reachable. */
#true-path-app .tp-btn--disabled,
#true-path-app .opt[aria-disabled="true"] { opacity: .45; cursor: default; }
#true-path-app .tp-btn--disabled:hover { background: none; color: var(--mut); }

/* Printing a report prints the report: the site chrome stays on screen. */
@media print {
  nav, .mobile-nav, footer { display: none !important; }
  #true-path-app { padding-top: 0 !important; background: #fff !important; }
  #true-path-app .pulse { display: none !important; }
}

/* v2.2 visual pass: use more of a desktop screen. The approved single column stays, but on large
   monitors it widens and scales instead of leaving a narrow strip down the middle. */
@media (min-width: 1100px) {
  #true-path-app > #tp-step-root, #true-path-app > #tp-report-root { max-width: 780px; padding: 28px 40px 72px; }
  #true-path-app { font-size: 17px; }
  #true-path-app h1 { font-size: 3rem; }
  #true-path-app h2 { font-size: 2rem; }
  #true-path-app .btn { font-size: 17px; padding: 15px 26px; }
  #true-path-app .opt { font-size: 16.5px; }
}

/* ─── v2.3: report result page (shared-content renderer) ─── */
#true-path-app .tp-label { display: block; margin: 0 0 4px; color: var(--gold); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* v2.3 D1/D9: the Talent Tree explanation is an inline ⓘ beside its heading. It opens on hover,
   keyboard focus and tap (a button takes focus on tap), and never prints. */
#true-path-app .tp-info {
  position: relative; display: inline-block; vertical-align: middle; margin-left: 4px;
  padding: 0 4px; background: none; border: 0; color: var(--gold); cursor: help;
  font: inherit; font-size: .62em; line-height: 1;
}
#true-path-app .tp-info::after {
  content: attr(data-tip); display: none; position: absolute; left: 50%; top: 135%; z-index: 5;
  transform: translateX(-50%); width: min(260px, 70vw); padding: 8px 10px; border-radius: 6px;
  background: #1c1717; border: 1px solid var(--gold); color: #f5f5f2;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
#true-path-app .tp-info:hover::after, #true-path-app .tp-info:focus::after { display: block; }
#true-path-app .result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 14px; }
#true-path-app ul { padding-left: 1.35em; }
#true-path-app .score-pill { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
#true-path-app .score-name { flex: 0 0 34%; }
#true-path-app .score-val { flex: 0 0 6.6em; font-weight: 600; white-space: nowrap; }
#true-path-app .score-bar { flex: 1; height: 6px; background: rgba(245,245,242,.12); border-radius: 4px; overflow: hidden; }
#true-path-app .score-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
#true-path-app .watch-card { border-left: 3px solid var(--gold); }
#true-path-app .quick-win { border-left: 3px solid var(--gold); background: rgba(198,169,107,.08); }
#true-path-app .teaser { background: rgba(0,0,0,.25); }

/* v2.3 D8: browser print of the result page — hide chrome, keep the report. */
@media print {
  /* `html body` raises specificity above assets/site-chrome.css, which loads later and pins
     `nav { display: flex !important; position: fixed !important }`; without it the fixed nav
     (and its logo) printed over the headings on every page. */
  html body nav, html body .mobile-nav, html body footer, .nop, .tp-pdf-note, .tp-info { display: none !important; }
  html body::before { display: none !important; }
  #true-path-app { padding-top: 0 !important; background: #fff !important; color: #111 !important; }
  #true-path-app:before, #true-path-app .pulse { display: none !important; }
  #true-path-app .pg, #true-path-app .box, #true-path-app .watch-card, #true-path-app .quick-win,
  #true-path-app .teaser { break-inside: avoid; page-break-inside: avoid; }
  #true-path-app svg, #true-path-app svg * { opacity: 1 !important; transform: none !important; animation: none !important; }
  #true-path-app .grow, #true-path-app .br { animation: none !important; opacity: 1 !important; transform: none !important; }
  #true-path-app .btn { display: none !important; }
  /* the translucent dark panels become the report's light paper tones */
  #true-path-app .teaser { background: #efe9e1 !important; }
  #true-path-app .quick-win, #true-path-app .watch-card { background: #faf7f2 !important; }
}