/* chango.fit/workout-plan/ (scripts/build-workout-plan-page.py), on top of home.css and
   figure.css (the 3D figure page's top, sections, notes and cards). Figma: Verkkosivu •
   Workout plan, desktop 5261:1601 (1280), mobile 5297:138789 (402). The pictures of
   sections 3, 4 and 6 sit where Figma has them: each box is drawn in Figma's pixels
   times --k (1px on a computer, smaller on a phone). */

/* ---- Top: the gym and Chango's back squat (Figma 5271:830, mirrored) ---- */
.wp-hero-squat{position:absolute; z-index:2; left:calc(50% + 68px); top:258px; width:402px; height:auto}

/* ---- The sections ---- */
.wp-sec{position:relative; padding:120px max(16px, calc(50% - 553px)); background:#fff; color:var(--blue80); overflow:hidden}
.wp-sec.f-blue{background:var(--blue2)}   /* white and light blue in turn, as on the front page (Jenni 31.10.2026) */
.wp-sec h2{margin:0; font-size:56px; line-height:65px; font-weight:400; letter-spacing:-1.12px; color:var(--blue80)}
.wp-sec h2 em{line-height:0}
/* 1 and 2: the text in the middle, the block under it */
.wp-center .wp-text{width:760px; max-width:100%; margin:0 auto; text-align:center}
.wp-center h2{width:900px; max-width:100%; margin:0 auto}
.wp-center .wp-text h2{margin:0 -70px; width:auto; max-width:none}   /* Figma: 900 wide over the 760 text */
.wp-center .f-body{margin-top:16px}
/* 3–6: the text and a picture box side by side, both from the top as in Figma */
.wp-side{display:grid; align-items:start; justify-content:start; min-height:960px; padding-top:0; padding-bottom:0; box-sizing:border-box; --k:1px}
.wp-vis{position:relative}
.wp-ph{position:absolute; height:auto}

/* ---- 1 The calculator (Figma 5265:851) ---- */
.wp-calc{position:relative; display:grid; grid-template-columns:476px 1fr; width:1040px; max-width:100%; margin:56px auto 0; padding:48px; box-sizing:border-box;
  border-radius:16px; background:#fff; box-shadow:0 12px 16px rgba(31,51,89,.3); text-align:left}
.wp-calc-in{display:flex; flex-direction:column; gap:12px; padding-right:48px; border-right:1px solid var(--blue10)}
.wp-label{margin:0; font-size:15px; line-height:normal; font-weight:600; color:var(--blue80)}
.wp-label-b{font-size:14px; line-height:24px; font-weight:700; letter-spacing:-.28px; margin-bottom:-8px}
.wp-segs{display:flex; gap:0; padding:2px; border-radius:100px; background:rgba(131,174,222,.2)}
.wp-n{margin-bottom:16px}
.wp-goals{margin-bottom:16px}
.wp-seg{flex:1 0 0; height:40px; padding:0 8px; border:0; border-radius:1000px; background:none; color:var(--blue80); font:600 16px/24px var(--font); white-space:nowrap; cursor:pointer}
.wp-seg.on{background:var(--blue80); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06)}
.wp-seg:focus-visible, .wp-range:focus-visible, .wp-ex:focus-visible, .wp-tap-btns button:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.wp-len{display:flex; justify-content:space-between; align-items:center}
.wp-len b{font-size:20px; font-weight:700}
/* the slider: the track Blue 10, filled with the glow's yellow to orange (--p, workout-plan.js), a white knob */
.wp-range{-webkit-appearance:none; appearance:none; width:100%; height:28px; margin:0; background:none; cursor:pointer; --p:37.5%}
.wp-range::-webkit-slider-runnable-track{height:8px; border-radius:4px; background:linear-gradient(90deg, #ffc422, #ff8c00) 0 0 / var(--p) 100% no-repeat, var(--blue10)}
.wp-range::-moz-range-track{height:8px; border-radius:4px; background:linear-gradient(90deg, #ffc422, #ff8c00) 0 0 / var(--p) 100% no-repeat, var(--blue10)}
.wp-range::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; margin-top:-10px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(31,51,89,.3)}
.wp-range::-moz-range-thumb{width:28px; height:28px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(31,51,89,.3)}
.wp-range-ends{display:flex; justify-content:space-between; margin:-10px 0 0; font-size:14px; opacity:.7}
.wp-calc-out{display:flex; align-items:center; gap:22px; padding-left:48px}
.wp-figcol{display:flex; flex-direction:column; align-items:center; flex:none}
/* the figure picker on top of the card (Jenni 31.10.2026), as on the 3D figure page */
.wp-figs{display:flex; width:max-content; gap:4px; padding:6px; position:relative; z-index:2; margin:48px auto -26px; border-radius:999px; background:var(--blue2); box-shadow:0 12px 32px rgba(31,51,89,.3)}
.wp-fig{padding:10px 20px; border:0; border-radius:999px; background:none; color:var(--blue80); font:600 16px/normal var(--font); white-space:nowrap; cursor:pointer}
.wp-figs + .wp-calc{margin-top:0; padding-top:88px}   /* room under the figure switch (Jenni 31.10.2026) */
.wp-fig.on{background:var(--blue80); color:#fff}
.wp-fig:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
/* dragged to turn, as on the 3D figure page (web/figure.js) */
.wp-calc-fig{position:relative; flex:none; width:210px; height:368px; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; outline:none}
.wp-calc-fig:active{cursor:grabbing}
.wp-calc-fig:focus-visible{outline:2px solid var(--blue80); outline-offset:6px; border-radius:12px}
.wp-man{position:absolute; left:50%; bottom:0; width:auto; height:100%; transform:translateX(-50%); pointer-events:none}
.wp-calc-fig[data-fig="ape"] .wp-man{height:86%}
.wp-man-glow{transition:opacity .4s ease}
.wp-shadow{position:absolute; left:4%; top:88%; width:92%; height:auto; pointer-events:none}
.wp-drag{margin:8px 0 0; font-size:14px; opacity:.7}
.wp-drag span{margin-right:6px}
.wp-result{display:flex; flex-direction:column; gap:4px}
.wp-pct{margin:0; font:400 68px/72px "Luckiest Guy", var(--font); color:var(--blue80)}
.wp-of{margin:0; font-size:18px}

/* the muscle tapped on the calculator's figure: its exercises in the same card (Jenni 31.10.2026) */
.wp-cx{grid-column:1 / -1; margin-top:32px; padding-top:24px; border-top:1px solid var(--blue10)}
.wp-cx-hint{display:flex; align-items:center; justify-content:center; gap:10px; margin:0; font-size:16px; font-weight:600}
.wp-cx.on .wp-cx-hint{display:none}
.wp-cx-in{display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start; text-align:left}
.wp-cx-in[hidden]{display:none}
.wp-cx-ex{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0; padding:0; list-style:none}
.wp-cx .wp-how{margin-top:0}
.wp-cx-ring[hidden]{display:none}
.wp-cx-ring{pointer-events:none; transition:left .2s ease, top .2s ease}

/* ---- 3 Sets, reps and rest: two phones (Figma 5264:2105, 5264:2107) ---- */
.wp-sets{grid-template-columns:527px calc(665 * var(--k))}
.wp-sets .f-text{margin-top:262px}
.wp-sets h2{width:580px}
.wp-sets .wp-vis{margin-top:120px; width:calc(665 * var(--k)); height:calc(905 * var(--k))}
/* one phone with the effort, the set ring loose on top of it (Jenni 31.10.2026, Figma 5818:914) */
.wp-sring{left:calc(22 * var(--k)); top:calc(290 * var(--k)); width:calc(341 * var(--k)); z-index:1}
.wp-rest-ph{left:calc(169 * var(--k)); top:0; width:calc(405 * var(--k)); -webkit-mask-image:linear-gradient(to left, transparent, #000 10%); mask-image:linear-gradient(to left, transparent, #000 10%)}   /* the export's shadow ends in a hard edge */

/* ---- 4 Changing the workout: two phones (Figma 5264:2109, 5264:2111), the text on the right ---- */
.wp-change{grid-template-columns:calc(708 * var(--k)) 466px; padding-left:max(16px, calc(50% - 614px))}
.wp-change .f-text{margin-top:102px; padding-left:46px}
html[lang=es] .wp-change .f-text{padding-left:0}   /* its display line is the longest */
.wp-change .wp-vis{margin-top:73px; width:calc(806 * var(--k)); height:calc(990 * var(--k))}
/* one phone, no settings view (Jenni 31.10.2026) */
.wp-swap{left:calc(200 * var(--k)); top:0; width:calc(521 * var(--k))}

/* ---- 5 Tap a muscle (Figma 5266:847, panel 5266:868) ---- */
.wp-muscles{grid-template-columns:499px 634px}
.wp-muscles .f-text{margin-top:294px; width:440px}
.wp-muscles h2{width:560px}
.wp-tap-vis{display:flex; gap:51px; margin-top:108px}
.wp-tap{position:relative; flex:none; width:263px; height:500px; margin-top:114px; cursor:pointer; -webkit-tap-highlight-color:transparent}
/* Chango in Figma's 263 × 500 box, fitted by width (object-contain), in the middle */
.wp-tap img:not(.wp-shadow){position:absolute; left:0; top:70px; width:263px; height:auto; user-select:none; -webkit-user-select:none}
.wp-tap-lit{pointer-events:none}
.wp-tap .wp-shadow{left:20px; top:383px; width:223px}
.wp-tap-ring{position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(255,255,255,.35);
  box-shadow:0 0 0 2px #fff, 0 6px 16px rgba(31,51,89,.3); pointer-events:none; transition:left .25s ease, top .25s ease}
.wp-tap-ring::after{content:""; position:absolute; left:20px; top:20px; width:16px; height:16px; border-radius:50%; background:#fff}
.wp-tap-hint{position:absolute; left:0; right:0; top:468px; margin:0; text-align:center; font-size:15px; font-weight:600}
/* the muscles as buttons for the keyboard and screen readers; on the figure one taps the picture */
.wp-tap-btns{position:absolute; left:0; top:500px; display:flex; flex-wrap:wrap; gap:4px; width:263px; opacity:0; pointer-events:none}
.wp-tap-btns:focus-within{opacity:1; pointer-events:auto}
.wp-tap-btns button{padding:4px 8px; border:0; border-radius:999px; background:var(--blue2); color:var(--blue80); font:600 13px var(--font)}
.wp-panel{flex:none; width:320px; padding:24px; box-sizing:border-box; border-radius:16px; background:#fff; box-shadow:0 12px 16px rgba(31,51,89,.3)}
.wp-panel-name{margin:0; font:400 30px/34px "Luckiest Guy", var(--font)}
.wp-panel-sub{margin:0 0 12px; font-size:14px; opacity:.75}
.wp-exlist{max-height:300px; overflow-y:auto; margin:0 -8px; padding:0 8px; list-style:none}
.wp-ex{display:flex; align-items:center; gap:14px; width:100%; padding:8px; border:0; border-radius:12px; background:none; color:var(--blue80); font:inherit; text-align:left; cursor:pointer}
.wp-ex.on{background:var(--blue2)}
.wp-ex img{flex:none; width:56px; height:56px; border-radius:12px; background:var(--blue2); object-fit:contain}
.wp-ex b{display:block; font-size:16px; font-weight:600}
.wp-ex small{display:block; margin-top:2px; font-size:14px; opacity:.75}
.wp-how{margin-top:14px; padding:16px; border-radius:12px; background:var(--blue2)}
.wp-how-title{margin:0; font-size:15px; font-weight:800}
.wp-steps{margin:10px 0 0; padding:0; list-style:none; counter-reset:step}
.wp-steps li{display:flex; gap:10px; font-size:14px; line-height:20px; counter-increment:step}
.wp-steps li + li{margin-top:10px}
.wp-steps li::before{content:counter(step); flex:none; font-weight:700}

/* ---- 6 Life: the phone with the extra workout, the imported workouts beside it (Figma 5264:2113) ---- */
.wp-life{grid-template-columns:513px calc(679 * var(--k))}
.wp-life .f-text{margin-top:192px; width:480px}
.wp-life .wp-vis{margin-top:88px; width:calc(679 * var(--k)); height:calc(1064 * var(--k))}
.wp-extra{left:calc(178 * var(--k)); top:0; width:calc(501 * var(--k))}
.wp-run{left:0; top:calc(212 * var(--k))}
.wp-padel{left:calc(40 * var(--k)); top:calc(292 * var(--k))}

/* ---- 7 The research behind it (Figma 5266:138143) ---- */
.wp-research{padding:110px max(16px, calc(50% - 528px)) 74px; background:#fff; color:var(--blue80); text-align:center}
.wp-research h2{margin:0; font-size:48px; line-height:58px; font-weight:400}
.wp-blogs{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:48px; text-align:left}
.wp-blog{display:flex; flex-direction:column; min-height:190px; padding:28px; box-sizing:border-box; border-radius:16px; background:var(--blue2); color:var(--blue80); text-decoration:none}
.wp-blog[hidden]{display:none}
.wp-blog-tag{font-size:13px; font-weight:600; opacity:.7}
.wp-blog b{margin-top:24px; font-size:20px; line-height:26px; font-weight:700}
.wp-blog-more{margin-top:auto; padding-top:24px; font-size:14px; font-weight:600}
.wp-blog:hover b{text-decoration:underline}

/* narrow computers: the picture boxes a little smaller so they fit beside the text */
@media (min-width:1100px) and (max-width:1279px){
  .wp-side{--k:.85px}
  .wp-muscles .wp-tap-vis{zoom:.9}
}

/* ---- Phones and small tablets: the text, then the picture (Figma 5297:138789) ---- */
@media (max-width:1099px){
  .wp-hero-squat{position:relative; left:auto; top:auto; display:block; width:min(320px, 80%); margin:24px auto 48px}
  .wp-sec, .wp-side, .wp-change{display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:64px 16px}
  .wp-sec h2{font-size:30px; line-height:36px; letter-spacing:-.6px}
  .wp-center .wp-text h2{margin:0}
  .wp-center .wp-text, .wp-side .f-text{width:auto; max-width:var(--u); margin:0 auto; text-align:left}
  .wp-sets h2, .wp-muscles h2, .wp-side .f-text{width:auto}
  .wp-side .f-text, html[lang=es] .wp-side .f-text{margin-top:0; padding-left:0}
  .wp-side .wp-vis, .wp-change .wp-vis{order:2; align-self:center; margin-top:40px}
  .wp-side{--k:calc(min(100vw - 32px, 370px) / 665)}
  .wp-change{--k:calc(min(100vw - 32px, 370px) / 806)}
  .wp-life{--k:calc(min(100vw - 32px, 370px) / 679)}

  .wp-calc{display:flex; flex-direction:column; padding:24px 20px; margin-top:32px}
  .wp-calc-in{padding:0 0 24px; border-right:0; border-bottom:1px solid var(--blue10)}
  .wp-seg{padding:0 4px; font-size:15px}
  /* one row as the app's goal slider: the picked level named, the others as dots (Jenni 31.10.2026) */
  .wp-goals .wp-seg{flex:1.8 1 0; padding:0 8px}   /* the picked one a little wider, the dots evenly in the rest */
  .wp-goals .wp-seg:not(.on){flex:1 1 0; padding:0; font-size:0; position:relative}
  .wp-goals .wp-seg:not(.on)::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--blue30)}
  .wp-calc-out{justify-content:center; gap:16px; padding:24px 0 0}
  .wp-calc-fig{width:130px; height:228px}
  .wp-cx{margin-top:24px}
  .wp-cx-in{grid-template-columns:1fr; gap:16px}
  .wp-cx-ex{grid-template-columns:1fr; max-height:300px; overflow-y:auto}
  .wp-cx-hint{font-size:15px; text-align:left}
  .wp-fig{padding:10px 16px; font-size:15px}
  .wp-figs{margin-top:32px}
  .wp-figs + .wp-calc{padding-top:60px}
  .wp-pct{font-size:52px; line-height:56px}
  .wp-of{font-size:16px}


  .wp-muscles .wp-tap-vis{flex-direction:column; align-items:center; gap:24px; margin-top:32px}
  .wp-tap{margin-top:0}
  .wp-panel{width:100%; max-width:370px}

  .wp-life .f-cards{margin-top:24px}

  .wp-research{padding:64px 16px}
  .wp-research h2{font-size:30px; line-height:36px}
  .wp-blogs{grid-template-columns:1fr; gap:16px; margin-top:28px}
  .wp-blog{min-height:0}
}