/* Fitness journeys: timeline, diagrams, charts and tool layouts. Tokens only (css/tokens.css). */
.cite { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); }
.cite a { color: var(--ink-2); }
.srcs { padding-left: var(--s-5); max-width: 78ch; }
.srcs li { margin-bottom: var(--s-3); }
.srcs__k { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.callout { padding: var(--s-4) var(--s-5); border: 1.5px solid var(--line-strong); border-left: 6px solid var(--accent); border-radius: var(--r-2); background: var(--surface); max-width: 78ch; margin: var(--s-5) 0; }
.callout--soft { border-left-color: var(--c-fat); }
.verdict { padding: var(--s-4) var(--s-5); background: var(--accent-soft); border-radius: var(--r-2); max-width: 78ch; font-size: var(--fs-lg); }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.6 var(--font-body); background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.pill--3 { background: var(--warn-soft); color: var(--warn); }
.pill--4 { background: var(--bad-soft); color: var(--bad); }
.pill--na { background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.pill--1 { background: var(--good-soft); color: var(--good); }
.tag { display: inline-block; padding: 0 8px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--ink-2); }
.tag--src { border-style: solid; border-color: var(--accent); color: var(--accent-ink); }
.split { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(280px, 400px) 1fr; } .split--tool { grid-template-columns: minmax(300px, 460px) 1fr; } }
.stages { padding-left: var(--s-5); }
.stages li { margin-bottom: var(--s-3); }
.quad { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quad section { padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--r-2); }
.quad h3 { margin-top: 0; font-size: var(--fs-lg); }
.fig { margin: var(--s-5) 0; }
.fig figcaption { font-size: var(--fs-sm); color: var(--ink-3); max-width: 72ch; margin-top: var(--s-2); }
.fig--narrow, .fig--tl, .fig--tool { max-width: 460px; }
.fig svg { width: 100%; height: auto; display: block; }
.fig--chart { max-width: 580px; }
.fig--tl { margin-top: 0; }
/* timeline */
.tl__line { stroke: var(--line-strong); stroke-width: 3; }
.tl__n { fill: #fff; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 4 3; }
.tl__n--src { fill: var(--accent); stroke-dasharray: none; }
.tl__i { font: 700 14px var(--font-body); fill: var(--accent-ink); }
.tl__i--src { fill: #fff; }
.tl__h { font: 700 16px var(--font-display); fill: var(--ink); }
.tl__s { font: 500 13px var(--font-body); fill: var(--ink-2); }
/* schematic diagrams */
.dg text { font-family: var(--font-body); }
.dg__h { font-weight: 700; font-size: 16px; fill: var(--ink); font-family: var(--font-display); }
.dg__s { font-size: 13px; fill: var(--ink-2); }
.dg__n { font-size: 12px; fill: var(--ink-3); }
.dg__t { font-size: 15px; font-weight: 700; fill: var(--ink); }
.dg__rule { stroke: var(--line); stroke-width: 2; }
.dg__box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.dg__box--hot { fill: var(--accent-soft); stroke: var(--accent); }
.dg__arr { stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dg__br { stroke: var(--line-strong); }
.fb { stroke: var(--ink); stroke-width: 2; }
.fb--1 { fill: var(--c-carbs); }
.fb--2 { fill: var(--accent-bright); }
/* charts */
.ch text { font-family: var(--font-body); }
.ch__t { font-size: 12px; fill: var(--ink-3); }
.ch__grid { stroke: var(--line); stroke-width: 1; }
.ch__abs { fill: none; stroke: var(--accent); stroke-width: 3; }
.ch__per { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 7 5; }
.ch__lab { font-size: 13px; font-weight: 700; fill: var(--ink); }
.ch__lab--a { fill: var(--accent-ink); }
.ch__dot { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.ch__dot--a { stroke: var(--accent); fill: var(--accent-soft); }
.ch__mk { stroke: var(--c-fat); stroke-width: 2; stroke-dasharray: 3 3; }
.fv__rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; }
/* radar */
.radar { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .radar { grid-template-columns: minmax(300px, 460px) 1fr; } }
.rd { width: 100%; max-width: 460px; height: auto; }
.rd text { font-family: var(--font-body); }
.rd__ring { fill: none; stroke: var(--line); stroke-width: 1; }
.rd__axis { stroke: var(--line-strong); stroke-width: 1; }
.rd__lab { font-size: 13px; font-weight: 600; fill: var(--ink); }
.rd__s { fill-opacity: 0.12; stroke-width: 3; }
.rd__p { fill: #fff; stroke-width: 2.5; }
.s0 { stroke: var(--accent); fill: var(--accent); }
.s1 { stroke: var(--ink); fill: var(--ink); stroke-dasharray: 8 5; }
.s2 { stroke: var(--good); fill: var(--good); stroke-dasharray: 2 5; }
.rd__p.s0, .rd__p.s1, .rd__p.s2 { fill: #fff; stroke-dasharray: none; }
.lg { stroke-width: 3; }
.lg--s0 { stroke: var(--accent); }
.lg--s1 { stroke: var(--ink); stroke-dasharray: 8 5; }
.lg--s2 { stroke: var(--good); stroke-dasharray: 2 5; }
.legend2 { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.legend2 li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
/* comparison table and picker */
.jn-pick { display: none; margin-bottom: var(--s-5); }
.js .jn-pick { display: block; }
.jn-pick fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jn-pick legend { font-weight: 700; margin-bottom: var(--s-2); }
.chip--box { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; cursor: pointer; font-weight: 600; }
.chip--box input { width: 18px; height: 18px; accent-color: var(--accent); }
.chip--box:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chip--box:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.dt-wrap--x { overflow-x: auto; }
.dt--cmp { min-width: 640px; }
.dt--cmp th, .dt--cmp td { min-width: 190px; vertical-align: top; }
.dt--cmp thead th { position: static; }
.dt--cmp tbody th { min-width: 130px; position: sticky; left: 0; background: #fff; z-index: 2; }
.dt--cmp th small { display: block; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.dt--cmp td small { display: block; margin-top: 4px; color: var(--ink-3); }
.mini { padding-left: var(--s-4); margin: 0; }
.mini li { margin: 0 0 4px; }
.mini small { color: var(--ink-3); }
/* tools */
.jn-form__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.fld--rng { min-width: 0; margin-bottom: var(--s-4); }
.fld--rng input[type=range] { height: 32px; padding: 0; accent-color: var(--accent); width: 100%; }
.fld--rng output { color: var(--accent-ink); font-weight: 800; }
.res { padding: var(--s-4); background: var(--surface); border-radius: var(--r-2); margin: var(--s-4) 0; }
.res .stats { margin-bottom: var(--s-2); }
.res__lab { font-weight: 600; margin: 0 0 var(--s-3); }
.dt td.num, .dt th.num { text-align: right; }
.jump { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.jump span { color: var(--ink-3); }
.jnext { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; margin: var(--s-6) 0; }
.jnext__a { display: block; padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-2); text-decoration: none; color: var(--ink); }
.jnext__a:hover { border-color: var(--accent-bright); }
.jnext__a--n { text-align: right; grid-column: 2; }
.jnext small { display: block; color: var(--ink-3); }
@media (max-width: 520px) { .jnext { grid-template-columns: 1fr; } .jnext__a--n { grid-column: 1; text-align: left; } }
/* internal linking blocks */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
.tags span { color: var(--ink-3); }
.tags .chip { padding: 4px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none; color: var(--ink); font-weight: 600; }
.tags .chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.tlist { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.tlist li { margin: 0; display: grid; }
.tlist span { color: var(--ink-3); font-size: var(--fs-sm); }
/* comparison table keeps true table layout on phones and scrolls sideways inside its wrapper */
@media (max-width: 780px) {
  .dt.dt--cmp { display: table; }
  .dt.dt--cmp thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .dt.dt--cmp tbody { display: table-row-group; }
  .dt.dt--cmp tr { display: table-row; padding: 0; margin: 0; border: 0; background: none; }
  .dt.dt--cmp th, .dt.dt--cmp td { display: table-cell; padding: 12px; border-bottom: 1px solid var(--line); text-align: left !important; background: #fff !important; }
  .dt.dt--cmp td::before, .dt.dt--cmp tbody th::before { content: none; }
  .dt.dt--cmp { min-width: 560px; }
  .dt.dt--cmp th, .dt.dt--cmp td { min-width: 170px; }
  .dt.dt--cmp tbody th { min-width: 120px; }
}

.rate { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0; }
.rate li { font-size: var(--fs-sm); }
@media (max-width: 899px) { .fig--tl { display: none; } }

/* ---- route page layout: stepper, finding cards, depth sections, numbered mistakes ---- */
.stages { list-style: none; padding: 0; margin: 0; counter-reset: st; display: grid; gap: var(--s-3); }
.stages li { counter-increment: st; position: relative; margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 44px); background: var(--surface); border-radius: var(--r-2); }
.stages li::before { content: counter(st); position: absolute; left: var(--s-4); top: var(--s-4); width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 var(--fs-sm)/30px var(--font-display); text-align: center; }
.stages li strong { font-size: var(--fs-lg); margin-right: var(--s-2); }
.stages li .tag { vertical-align: 2px; }
.nugrid { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nucard { margin: 0; padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--r-2); border-top: 4px solid var(--accent); }
.nucard h3 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.nucard p { margin: 0; }
.callout--calc { border-left-color: var(--c-carbs); }
.callout--calc p { margin: 0; }
.quad section { border-top: 4px solid var(--c-fat); }
.quad section:nth-child(2) { border-top-color: var(--bad); }
.quad section:nth-child(3) { border-top-color: var(--accent); }
.quad section:nth-child(4) { border-top-color: var(--good); }
.dsec { padding: var(--s-5); background: var(--surface); border-radius: var(--r-3, var(--r-2)); }
.dsec__h { margin-bottom: var(--s-4); }
.dsec__h h2 { margin: 0 0 var(--s-2); }
.dsec__k { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink-2); max-width: 62ch; }
.dsec__b { display: grid; gap: var(--s-4); }
.dsec__b p, .dsec__b ul { margin: 0; max-width: 72ch; }
.dsec .dt-wrap { background: #fff; border-radius: var(--r-2); }
.facts { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.facts li { margin: 0; padding: var(--s-4); background: #fff; border-radius: var(--r-2); display: grid; gap: 4px; align-content: start; }
.facts strong { font: 800 var(--fs-xl)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--accent-ink); }
.facts span { font-size: var(--fs-sm); }
.facts a { font-size: var(--fs-xs); color: var(--ink-3); }
.cref { color: var(--ink-2); }
.mistakes { list-style: none; padding: 0; margin: 0 0 var(--s-3); counter-reset: mk; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mistakes li { counter-increment: mk; margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 40px); background: var(--surface); border-radius: var(--r-2); position: relative; }
.mistakes li::before { content: counter(mk); position: absolute; left: var(--s-4); top: var(--s-4); width: 26px; height: 26px; border-radius: var(--r-2); background: var(--bad-soft); color: var(--bad); font: 800 var(--fs-sm)/26px var(--font-display); text-align: center; }
.srcbox { margin: 0 0 var(--s-4); }
.srcbox summary { cursor: pointer; font-weight: 700; padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-2); min-height: 44px; }
.srcbox[open] summary { margin-bottom: var(--s-4); }
.jump { position: sticky; top: 0; z-index: 5; background: #fff; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.jump a { padding: 4px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none; color: var(--ink); font-weight: 600; }
.jump a:hover { border-color: var(--accent); color: var(--accent-ink); }
.sec { scroll-margin-top: 72px; }
/* the stage cards carry the duration; the circle timeline would repeat them, so keep it out of sight */
.fig--tl { display: none !important; }
.split:has(.fig--tl) { grid-template-columns: 1fr !important; }
.scene { display: grid; gap: var(--s-4); align-items: center; margin: 0 0 var(--s-5); }
.scene__art { max-width: 340px; width: 100%; }
.scene__art svg { width: 100%; height: auto; display: block; }
.scene__t { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink-2); max-width: 58ch; }
@media (min-width: 760px) { .scene { grid-template-columns: 300px 1fr; gap: var(--s-6); } }
.stages__d { display: block; margin-top: var(--s-2); color: var(--ink-2); max-width: 74ch; }
.grp { margin: var(--s-7) 0 var(--s-5); padding: var(--s-4) var(--s-5); border-left: 8px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-2); }
.grp__h { margin: 0; font: 800 var(--fs-xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.grp__p { margin: var(--s-1, 4px) 0 0; color: var(--ink-2); }
.toc { margin: 0 0 var(--s-5); }
.toc summary { cursor: pointer; font-weight: 700; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line-strong); border-radius: var(--r-2); min-height: 44px; background: #fff; }
.toc ol { columns: 2 280px; column-gap: var(--s-6); padding-left: var(--s-5); margin: var(--s-4) 0 0; }
.toc li { margin: 0 0 var(--s-2); break-inside: avoid; }