/* The English path page (#path, js/path-view.js). Tokens and shared classes from css/ui-kit.css only; logical properties for RTL; no motion. */
.pv-page { display: grid; gap: var(--sp-4); max-width: var(--content-max); margin-inline: auto; }
.pv-top h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-h1); color: var(--ink); }
.pv-top h1:focus { outline: none; }
.pv-top .lead { margin: 0; color: var(--ink-2); }
.pv-hero { display: grid; gap: var(--sp-3); justify-items: start; }
.pv-hero .eyebrow, .pv-hero p { margin: 0; }
.pv-hero .ds-progress { inline-size: 100%; }
.pv-hold { color: var(--muted); }
.pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.pv-levels { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pv-levels .chip { min-block-size: 44px; min-inline-size: 52px; }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pv-stage { display: grid; gap: var(--sp-2); align-content: start; justify-items: start; }
.pv-stage p { margin: 0; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); inline-size: 100%; }
.pv-preview { color: var(--ink-2); text-align: start; unicode-bidi: plaintext; }
:where(html:not(.a11y-contrast)) .pv-stage[data-state="solid"] .pv-pill, :where(html:not(.a11y-contrast)) .pv-stage[data-state="done"] .pv-pill { background: var(--ok-soft); color: var(--ok); }
:where(html:not(.a11y-contrast)) .pv-stage[data-state="fading"] .pv-pill { background: var(--warn-soft); color: var(--warn); }
:where(html:not(.a11y-contrast)) .pv-stage[data-state="learning"] .pv-pill { background: var(--accent-soft); color: var(--accent); }
:where(html:not(.a11y-contrast)) .pv-stage[data-state="assumed"] { opacity: .8; }