/* Good Legs: motion, graphics and the example progress dashboard.
   Builds on the site's own tokens (--paper, --ink, --night, --light, --gold, --pink, --ease, Geist, Mono, Instrument).
   Layout: a night band between the check-in and the stories; tiles across the top,
   the week (7 cols) beside the lift (5 cols), the check-in strip full width.
   Colour jobs: --ride = riding, --pink = strength. Validated on --night (dataviz six checks).
   Text: every word 4.5:1 or better on its own surface; nothing under 11px. */
:root{
  --ride:#b8893a;
  --gl-on-night:#f3f0e7;
  --gl-on-night-2:#a29d8c;
  --gl-rule-night:#2b2c26;
  --gl-axis-night:#4a4a40;
  --gl-card-night:#1a1b17;
  --gl-today-night:#211f17;
  --gl-on-pink:#1d0a11;
  --gl-ink-2:#66695e;
  --gl-ink-paper-2:#4d5740;
  --gl-type-label:11px;
  --gl-type-small:13px;
  --gl-type-body:15px;
  --gl-radius-card:14px;
  --gl-radius-cell:12px;
  --gl-radius-mark:4px;
  --gl-dur-control:180ms;
  --gl-dur-handoff:260ms;
  --gl-stagger:40ms;
}

.gl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Connections: signals travel to the plan ---------- */
.signal-routes path.route-flow{fill:none;stroke:var(--ride);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:2.5 97.5;stroke-dashoffset:100;opacity:0;filter:none;animation:none}
.signal-routes path.route-flow.is-selected{stroke:var(--pink);stroke-width:3.2;stroke-dasharray:3 47}
/* Signals play in bursts (under 5 s): when the diagram scrolls in and on each choice. */
.signal-routes path.route-flow{transition:opacity var(--gl-dur-handoff) var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .signal-routes.is-flowing path.route-flow{opacity:.8;animation:route-travel var(--flow-dur,2.4s) linear var(--flow-delay,0s) infinite}
  .signal-routes.is-flowing path.route-flow.is-selected{opacity:1;--flow-dur:1.2s}
  .connection-core.is-receiving::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--pink);pointer-events:none;animation:core-receive var(--gl-dur-handoff) var(--ease) both}
}
body.motion-paused .signal-routes path.route-flow{animation-play-state:paused}
@keyframes route-travel{to{stroke-dashoffset:0}}
@keyframes core-receive{0%{opacity:.9}100%{opacity:0}}

/* ---------- Progress dashboard ---------- */
.progress-section{background:var(--night);color:var(--gl-on-night);padding-bottom:72px}
#progress .chapter-top{border-color:var(--gl-rule-night)}
#progress .eyebrow,#progress .chapter-index{color:var(--gl-on-night-2);font-size:var(--gl-type-label)}
#progress .section-heading p{color:var(--gl-on-night-2)}
#progress .section-heading h2{color:var(--gl-on-night)}
#progress .section-heading h2 em{color:var(--gold)}
#progress .sample-note{color:var(--gl-on-night-2);font-size:var(--gl-type-label)}

.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.dash-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dash-tile,.dash-card{background:var(--gl-card-night);border:1px solid var(--gl-rule-night);border-radius:var(--gl-radius-card);min-width:0}
.dash-tile{padding:18px 20px 16px;display:grid;gap:6px;align-content:start}
.dash-label{font:var(--gl-type-label)/1.4 Mono,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--gl-on-night-2)}
.dash-value{font:500 clamp(34px,3.4vw,46px)/1 Geist,Arial,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--gl-on-night)}
.dash-value small{font-size:var(--gl-type-body);letter-spacing:0;color:var(--gl-on-night-2);margin-left:5px;font-weight:400}
.dash-sub{font-size:var(--gl-type-small);color:var(--gl-on-night-2)}
.dash-sub b{color:var(--gl-on-night);font-weight:500}
.dash-meter{height:6px;border-radius:var(--gl-radius-mark);background:var(--gl-rule-night);overflow:hidden;margin-top:8px}
.dash-meter i{display:block;height:100%;width:var(--fill,0%);background:var(--pink);border-radius:var(--gl-radius-mark);transition:width var(--gl-dur-handoff) var(--ease)}

.dash-card{margin:0;padding:20px 20px 16px;display:flex;flex-direction:column;gap:14px}
.dash-week{grid-column:span 7}
.dash-lift{grid-column:span 5}
.dash-checkins{grid-column:1/-1}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dash-head>div{min-width:0}
.dash-head h3{font:500 19px/1.2 Geist,Arial,sans-serif;letter-spacing:-.02em;color:var(--gl-on-night);margin:0}
.dash-head p{font-size:var(--gl-type-small);color:var(--gl-on-night-2);margin:3px 0 0}
.dash-chip{flex:none;font:var(--gl-type-label)/1 Mono,monospace;letter-spacing:.08em;padding:7px 10px;border-radius:999px;border:1px solid var(--gl-axis-night);color:var(--gold);white-space:nowrap;transition:background-color var(--gl-dur-handoff) var(--ease)}
.dash-chip.is-flash{background:var(--gl-today-night)}
.dash-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--gl-type-small);color:var(--gl-on-night-2);margin:0;padding:0;list-style:none}
.dash-legend li{display:flex;align-items:center;gap:7px}
.dash-swatch{width:12px;height:12px;border-radius:3px;flex:none}
.sw-key{background:var(--ride)}
.sw-easy{background:repeating-linear-gradient(135deg,var(--ride) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--ride)}
.sw-lift{background:var(--pink);border-radius:50%}

/* Week chart: HTML bars on one linear scale (0 to 4 h) */
.week-chart{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 8px;transition:opacity var(--gl-dur-control) var(--ease)}
.wc-axis{grid-column:1;grid-row:1;position:relative;height:190px;font:var(--gl-type-label)/1 Mono,monospace;color:var(--gl-on-night-2);font-variant-numeric:tabular-nums}
.wc-axis span{position:absolute;right:0;transform:translateY(50%)}
.wc-plot{grid-column:2;grid-row:1;position:relative;height:190px;border-bottom:1px solid var(--gl-axis-night)}
.wc-grid{position:absolute;left:0;right:0;border-top:1px solid var(--gl-rule-night)}
.wc-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.wc-col{position:relative;display:flex;justify-content:center;align-items:flex-end}
.wc-col::before{content:"";position:absolute;inset:0 3px;border-radius:8px 8px 0 0;background:#ffffff08;opacity:0;transition:opacity var(--gl-dur-control) var(--ease)}
.wc-col:hover::before{opacity:1}
.wc-bar{position:relative;width:min(40px,58%);height:var(--h,0%);border-radius:var(--gl-radius-mark) var(--gl-radius-mark) 0 0;background:var(--ride);transition:height var(--gl-dur-handoff) var(--ease)}
.wc-bar.is-easy{background:repeating-linear-gradient(135deg,var(--ride) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 1.5px var(--ride)}
.wc-tag{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font:var(--gl-type-label)/1 Mono,monospace;color:var(--gl-on-night);white-space:nowrap}
.wc-days,.wc-lifts{grid-column:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.wc-days{grid-row:2;font:var(--gl-type-label)/1 Mono,monospace;color:var(--gl-on-night-2);padding-top:9px}
.wc-lifts{grid-row:3;padding-top:10px;min-height:38px;align-items:center;justify-items:center}
.wc-lift-label{grid-column:1;grid-row:3;align-self:center;justify-self:end;font:var(--gl-type-label)/1 Mono,monospace;color:var(--gl-on-night-2);padding-top:10px}
.lift-pill{display:inline-flex;align-items:center;gap:5px;font:600 var(--gl-type-label)/1 Mono,monospace;padding:6px 8px;border-radius:999px;background:var(--pink);color:var(--gl-on-pink);white-space:nowrap;transition:background-color var(--gl-dur-control) var(--ease),color var(--gl-dur-control) var(--ease),box-shadow var(--gl-dur-control) var(--ease)}
.lift-pill.is-adjusted{background:transparent;color:var(--pink);box-shadow:inset 0 0 0 1.5px var(--pink)}
.lift-pill.is-rest{background:transparent;color:var(--gl-on-night-2);box-shadow:inset 0 0 0 1.5px var(--gl-axis-night)}

/* Tooltip shared by both charts (pointer only; the table carries the same numbers) */
.dash-tip{position:absolute;z-index:3;pointer-events:none;min-width:150px;max-width:220px;background:var(--light);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:var(--gl-type-small);line-height:1.45;box-shadow:0 14px 30px #00000066;opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity var(--gl-dur-control) var(--ease)}
.dash-tip.is-on{opacity:1}
.dash-tip b{display:block;font:var(--gl-type-label)/1.4 Mono,monospace;letter-spacing:.08em;color:var(--gl-ink-2);margin-bottom:3px}
.dash-tip strong{font-weight:600;font-variant-numeric:tabular-nums}

/* Lift line chart, drawn at the card's own width */
.lift-chart{position:relative}
.lift-chart svg{display:block;width:100%;height:auto;overflow:visible}
.lc-grid line{stroke:var(--gl-rule-night);stroke-width:1}
.lc-tick{font-family:Mono,monospace;font-size:var(--gl-type-label);fill:var(--gl-on-night-2)}
.lc-area{fill:url(#lift-fill)}
.lc-line{fill:none;stroke:var(--pink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lc-dot{fill:var(--gl-card-night);stroke:var(--pink);stroke-width:2}
.lc-end{fill:var(--pink);stroke:var(--gl-card-night);stroke-width:2}
.lc-rest{fill:none;stroke:var(--gl-on-night-2);stroke-width:1.5;stroke-dasharray:3 3}
.lc-end-ring{fill:none;stroke:var(--pink);stroke-width:1.5;opacity:.5}
.lc-note{font:500 var(--gl-type-small) Geist,Arial,sans-serif;fill:var(--gl-on-night)}
.lc-note-sub{font-family:Mono,monospace;font-size:var(--gl-type-label);fill:var(--gl-on-night-2)}
.lc-cross{stroke:var(--gl-axis-night);stroke-width:1;opacity:0;transition:opacity var(--gl-dur-control) var(--ease)}
.lc-hit{fill:transparent;cursor:crosshair}
@media (prefers-reduced-motion:no-preference){
  .lc-end-ring{animation:end-breathe 2.4s ease-in-out 2;transform-box:fill-box;transform-origin:center}
}
body.motion-paused .lc-end-ring{animation-play-state:paused}
@keyframes end-breathe{50%{transform:scale(1.5);opacity:.05}}

/* Check-in strip: state carried by shape and word, never colour alone */
.ci-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ci-day{border:1px solid var(--gl-rule-night);border-radius:var(--gl-radius-cell);padding:12px 10px;display:grid;gap:8px;justify-items:start;min-width:0;transition:border-color var(--gl-dur-control) var(--ease),background-color var(--gl-dur-control) var(--ease)}
.ci-day .ci-short{display:none}
.ci-day>span{font:var(--gl-type-label)/1 Mono,monospace;letter-spacing:.06em;color:var(--gl-on-night-2)}
.ci-day b{font-weight:500;font-size:var(--gl-type-small);color:var(--gl-on-night)}
.ci-day.is-today{border-color:var(--gold);background:var(--gl-today-night)}
.ci-day.is-future b{color:var(--gl-on-night-2)}
.ci-glyph{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gl-on-night);position:relative;flex:none;display:inline-block}
.ci-glyph.good{background:var(--gl-on-night)}
.ci-glyph.heavy{background:linear-gradient(90deg,var(--gl-on-night) 50%,transparent 50%)}
.ci-glyph.unwell::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:1.5px;background:var(--gl-on-night);transform:rotate(-45deg)}
.ci-glyph.future{box-shadow:inset 0 0 0 1px var(--gl-axis-night)}
.ci-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--gl-type-small);color:var(--gl-on-night-2);list-style:none;margin:0;padding:0}
.ci-key li{display:flex;align-items:center;gap:7px}
.ci-key .ci-glyph{width:14px;height:14px}
.ci-key .ci-glyph.unwell::after{top:6px;left:2px;right:2px}
.ci-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:var(--gl-type-small);color:var(--gl-on-night-2);border-top:1px solid var(--gl-rule-night);padding-top:12px}
.ci-foot strong{color:var(--gl-on-night);font-weight:500}

.dash-table{grid-column:1/-1;font-size:var(--gl-type-small);color:var(--gl-on-night-2)}
.dash-table summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font:var(--gl-type-label)/1.4 Mono,monospace;letter-spacing:.08em;color:var(--gold);list-style:none}
.dash-table summary::-webkit-details-marker{display:none}
.dash-table summary::before{content:"+";font:300 19px/1 Geist,Arial,sans-serif;transition:transform var(--gl-dur-control) var(--ease)}
.dash-table[open] summary::before{transform:rotate(45deg)}
.dash-table summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:4px}
.dash-table-wrap{overflow-x:auto;margin-top:6px}
.dash-table table{border-collapse:collapse;min-width:520px;width:100%;font-variant-numeric:tabular-nums}
.dash-table th,.dash-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--gl-rule-night)}
.dash-table th{font:var(--gl-type-label)/1.4 Mono,monospace;letter-spacing:.06em;color:var(--gl-on-night-2);font-weight:400}
.dash-table td{color:var(--gl-on-night)}
.dash-table caption{text-align:left;font-size:var(--gl-type-small);color:var(--gl-on-night-2);padding:10px 0 4px}

/* Entrance: complete at rest; plays once as the band nears the viewport. */
.dash.is-entering .wc-bar{animation:bar-rise var(--gl-dur-handoff) var(--ease) backwards;animation-delay:calc(var(--i,0) * var(--gl-stagger))}
.dash.is-entering .lc-line{stroke-dasharray:var(--len);animation:line-draw var(--gl-dur-handoff) var(--ease) backwards}
.dash.is-entering .lc-area,.dash.is-entering .lc-dot,.dash.is-entering .lc-end{animation:fade-in var(--gl-dur-handoff) var(--ease) var(--gl-dur-control) backwards}
.dash.is-entering .ci-day{animation:rise-in var(--gl-dur-handoff) var(--ease) backwards;animation-delay:calc(var(--i,0) * var(--gl-stagger))}
@keyframes bar-rise{from{height:0}}
@keyframes line-draw{from{stroke-dashoffset:var(--len)}}
@keyframes fade-in{from{opacity:0}}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}}
/* Reduce Motion: fade, never travel */
@media (prefers-reduced-motion:reduce){
  .wc-bar,.dash-meter i,.dash-table summary::before{transition:none}
  .dash.is-entering .wc-bar,.dash.is-entering .lc-line,.dash.is-entering .ci-day{animation:fade-in var(--gl-dur-control) linear backwards}
  .dash.is-entering .lc-line{stroke-dasharray:none}
}

/* ---------- The Lab: a sketch on each working paper ---------- */
.folio-layer.has-sketch .folio-lines{display:none}
.folio-sketch-wrap{display:grid;gap:6px;margin:0 0 auto;max-width:240px}
.folio-sketch{display:block;width:100%;height:auto;overflow:visible}
.folio-sketch-label{font:var(--gl-type-label)/1.3 Mono,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-ink-paper-2)}
.folio-sketch .fs-axis{stroke:var(--ink);stroke-opacity:.35;stroke-width:1;fill:none}
.folio-sketch .fs-line{fill:none;stroke:var(--pink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.folio-sketch .fs-guess{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4;stroke-linecap:round}
.folio-sketch .fs-band{fill:var(--pink);fill-opacity:.16}
.folio-sketch .fs-dot{fill:var(--ink)}
.folio-sketch .fs-dot.is-off{fill:none;stroke:var(--ink);stroke-width:1.5}
.folio-sketch .fs-q{font:400 26px Instrument,Georgia,serif;font-style:italic;fill:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .folio-layer.is-active .fs-line{stroke-dasharray:var(--len) var(--len);animation:line-draw var(--gl-dur-handoff) var(--ease) backwards}
  .folio-layer.is-active .fs-guess,.folio-layer.is-active .fs-band,.folio-layer.is-active .fs-dot,.folio-layer.is-active .fs-q{animation:fade-in var(--gl-dur-handoff) var(--ease) var(--gl-dur-control) backwards}
}

/* ---------- Recovery: a breath to follow ---------- */
.breath-pacer{position:absolute;z-index:3;left:50%;top:16px;transform:translateX(-50%);display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 6px 18px #26282014;font:var(--gl-type-label)/1 Mono,monospace;letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:box-shadow var(--gl-dur-control) var(--ease)}
.breath-pacer:hover{box-shadow:0 0 0 1px var(--ink),0 6px 18px #26282014}
.breath-pacer:focus-visible{outline:3px solid #bb4266;outline-offset:3px}
.breath-pacer .bp-paused{opacity:0}
.breath-pacer.is-paused .bp-in,.breath-pacer.is-paused .bp-out{visibility:hidden}
.breath-pacer.is-paused .bp-paused{opacity:1}
.breath-pacer.is-paused i,.breath-pacer.is-paused .bp-words>span,.recovery-world.is-paused .breathing-ring{animation-play-state:paused!important}
.breath-pacer i{width:14px;height:14px;border-radius:50%;background:var(--pink);flex:none}
.breath-pacer .bp-words{display:inline-grid}
.breath-pacer .bp-words>span{grid-area:1/1}
.breath-pacer .bp-out{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .recovery-world.is-breathing .breath-pacer{display:inline-flex}
  .recovery-world.is-breathing .breathing-ring{animation:pacer-ring 8s ease-in-out infinite}
  .breath-pacer i{animation:pacer-dot 8s ease-in-out infinite}
  .breath-pacer .bp-in{animation:pacer-in 8s steps(1,end) infinite}
  .breath-pacer .bp-out{animation:pacer-out 8s steps(1,end) infinite}
}
body.motion-paused .breath-pacer i,body.motion-paused .breath-pacer .bp-words>span,body.motion-paused .recovery-world.is-breathing .breathing-ring{animation-play-state:paused}
@keyframes pacer-ring{0%,100%{transform:scale(.92)}50%{transform:scale(1)}}
@keyframes pacer-dot{0%,100%{transform:scale(.55)}50%{transform:scale(1)}}
@keyframes pacer-in{0%{opacity:1}50%{opacity:0}}
@keyframes pacer-out{0%{opacity:0}50%{opacity:1}}

/* ---------- Questions: open and close without a jump ---------- */
.questions-list summary>span{transition:transform var(--gl-dur-control) var(--ease)}
@supports (interpolate-size:allow-keywords){
  .questions-list{interpolate-size:allow-keywords}
  .questions-list details::details-content{height:0;overflow:clip;transition:height var(--gl-dur-handoff) var(--ease),content-visibility var(--gl-dur-handoff) allow-discrete}
  .questions-list details[open]::details-content{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .recovery-world>img{transition:none}
  .questions-list summary>span{transition:none}
  .questions-list details::details-content{transition:none}
}

/* ---------- Narrow screens ---------- */
@media (max-width:980px){
  .dash-week,.dash-lift{grid-column:1/-1}
}
@media (max-width:640px){
  .dash-tiles{grid-template-columns:minmax(0,1fr)}
  .dash-head{flex-wrap:wrap}
  .ci-strip{gap:4px;grid-template-columns:repeat(auto-fit,minmax(min(100%,4ch),1fr));font:var(--gl-type-label)/1 Mono,monospace}
  .ci-day{padding:10px 2px;justify-items:center;text-align:center;gap:7px}
  .ci-day b{display:none}
  .ci-day .ci-long{display:none}
  .ci-day .ci-short{display:inline}
  .breath-pacer{top:12px;padding:0 12px 0 8px}
  .recovery-world>img{transform-origin:50% 100%;transition:transform var(--gl-dur-handoff) var(--ease),opacity .35s}
  .recovery-world.is-breathing>img{transform:scale(.86)}
  .wc-tag{display:none}
  .lift-pill{padding:5px 6px}
  .lift-pill .lp-long{display:none}
  .week-chart{grid-template-columns:28px minmax(0,1fr);gap:0 4px}
}
@media (forced-colors:active){
  .wc-bar,.lift-pill,.sw-key,.sw-lift,.ci-glyph{forced-color-adjust:none}
}