/* 2026-10-09 15:53 IST - Personal Training programme page: "process walkthrough" layout with a sticky flowchart rail.
   2026-10-10 03:40 IST - the coach family look (hero, steps, rail, sessions, meals, tips, start tile, other
   programmes) now lives in style-coach.css; this sheet keeps only the page's own infographic, the process flowchart.
   Every rule is scoped under body.pg-program-personal-training. Lead colours --pt-k1 / --pt-k2 come from the kit. */

/* 2026-10-09 15:53 IST - the flowchart SVG in the sticky rail */
body.pg-program-personal-training .ptf-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - 190px); margin: 6px auto 0; }
body.pg-program-personal-training .ptf-box { fill: var(--pt-card); stroke: #2e2e33; stroke-width: 1; transition: stroke .2s; }
body.pg-program-personal-training .ptf-node { cursor: pointer; }
body.pg-program-personal-training .ptf-node.is-now .ptf-box { stroke: var(--accent); stroke-width: 2; }
body.pg-program-personal-training .ptf-node:hover .ptf-box { stroke: #6d6d72; }
body.pg-program-personal-training .ptf-node.is-now:hover .ptf-box { stroke: var(--accent); }
body.pg-program-personal-training .lead-trainer .ptf-stripe, body.pg-program-personal-training .lead-trainer .ptf-disc { fill: var(--pt-k1); }
body.pg-program-personal-training .lead-you .ptf-stripe, body.pg-program-personal-training .lead-you .ptf-disc { fill: var(--pt-k2); }
body.pg-program-personal-training .ptf-num { fill: #111; font: 700 14px var(--body); }
body.pg-program-personal-training .ptf-title { fill: var(--text); font: 700 15.5px var(--body); }
body.pg-program-personal-training .ptf-sum { fill: #c9c8c1; font: 400 12.5px var(--body); }
body.pg-program-personal-training .ptf-days { fill: var(--muted); font: 600 12px var(--body); }
body.pg-program-personal-training .ptf-group { fill: none; stroke: #3a3a40; stroke-width: 1; }
body.pg-program-personal-training .ptf-group-l { fill: var(--muted); font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; }
body.pg-program-personal-training .ptf-arrow { stroke: #6a6a6e; stroke-width: 1.5; }
body.pg-program-personal-training .ptf-head { fill: #6a6a6e; }
body.pg-program-personal-training .ptf-loop { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
body.pg-program-personal-training .ptf-head-loop { fill: var(--accent); }
body.pg-program-personal-training .ptf-loop-l { fill: var(--text); font: 600 12px var(--body); letter-spacing: .04em; }

/* 2026-10-09 15:53 IST - phones and small tablets: the flowchart sits in the flow at its natural height */
@media (max-width: 900px) {
  body.pg-program-personal-training .ptf-svg { max-height: none; }
}

/* 2026-10-09 15:53 IST - motion */
@media (prefers-reduced-motion: reduce) {
  body.pg-program-personal-training .ptf-box { transition: none; }
}