/* ==========================================================================
   THE CATEGORY PAGES — the session list and the movement wall.  Prefix .lx-ss- / .lx-wall
   GENERATED by tools/render-library-pages.py. Edit that file, not this one.

   ⚠️ WHY THIS IS NOT IN css/library.css
   That file's `?v=` token is stamped into the ten workouts-<tier>.html pages as well
   as these 63. Adding a byte to it rewrites those ten pages, which another build owns.
   Nothing but a category page links this file, so it can change without touching them.

   WHAT IT IS FOR
   A category page used to end at one button: /build-my-plan, the questionnaire. A
   visitor could not see a single actual session, and the movements were a strip of six.
   Now the sessions are on the page, opened down to the day, with the warm-up, the main
   block and the cool-down written out; and the wall shows every movement the category
   uses — 17 on Yoga, 112 on Push Pull Legs + Core + Cardio.

   Mobile first. Every rule starts at 375px and widens.
   ========================================================================== */

/* ---------- the hero's two routes ----------
   The primary button now goes DOWN THE PAGE to the sessions, not out to the
   questionnaire. Full width at 375 so neither of them can be a 40px tap target, and
   side by side from 480 up. */
.lx-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.lx-hero__cta .btn{margin-top:0;flex:1 1 100%;justify-content:center;text-align:center}
@media (min-width:480px){.lx-hero__cta .btn{flex:0 0 auto}}
/* the header is fixed, so an in-page jump has to clear it or it lands under the nav */
.lx-ss,.lx-wall{scroll-margin-top:calc(var(--nav-h,64px) + 14px)}

/* ---------- section intro ---------- */
/* THE NAMED SUMMARY. Two columns of session names once there is room; one on a
   phone. It replaces the full card grid that used to print every exercise, so it
   carries the whole look of the section now. Names stay real text - they are what a
   search engine and a person both read - and nothing here states a set or a rep. */
.lx-ss__names{list-style:none;margin:0;padding:0}
.lx-ss__names li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  padding:9px 2px;border-bottom:1px solid var(--line,rgba(255,255,255,.10))}
.lx-ss__names li:last-child{border-bottom:0}
.lx-ss__names b{font:700 13.5px/1.35 'Inter','Inter Fallback',sans-serif;
  color:var(--ink,#f6f8fc);min-width:0}
.lx-ss__names span{font:400 11.5px/1.4 'Inter','Inter Fallback',sans-serif;
  color:var(--mute-2,#7b86a0);white-space:nowrap}
@media (min-width:720px){.lx-ss__names{columns:2;column-gap:26px}
  .lx-ss__names li{break-inside:avoid}}
.lx-ss__bar{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 14px;list-style:none;padding:0}
.lx-ss__bar li{padding:5px 10px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.04);font:700 10.5px/1 'Inter','Inter Fallback',sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:#9dabbe}
@media (min-width:560px){.lx-ss__bar li{font-size:11.5px}}

/* ---------- level / week disclosures ----------
   <details> and nothing else: the public CSP has a hashed script-src with no
   'unsafe-inline', and a drill-down that needs no script cannot break for a visitor
   whose JS never arrives. Every session's text is in the HTML either way. */
.lx-ss__lvl{margin:0 0 10px;border:1px solid var(--edge);border-radius:14px;
  background:var(--plate);overflow:hidden}
.lx-ss__lvl>summary,.lx-ss__wk>summary{cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px}
.lx-ss__lvl>summary::-webkit-details-marker,
.lx-ss__wk>summary::-webkit-details-marker{display:none}
.lx-ss__lvl>summary{padding:14px 15px}
.lx-ss__lvl>summary b{font:900 17px/1.05 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.015em;color:#fff}
@media (min-width:560px){.lx-ss__lvl>summary b{font-size:20px}}
.lx-ss__lvl>summary em,.lx-ss__wk>summary em{font-style:normal;
  font:700 10.5px/1 'Inter','Inter Fallback',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:#7f8ca1}
.lx-ss__lvl>summary::after,.lx-ss__wk>summary::after{content:"+";margin-left:auto;flex:none;
  font:900 19px/1 'Barlow Condensed','BC Fallback',sans-serif;color:var(--accent)}
.lx-ss__lvl[open]>summary::after,.lx-ss__wk[open]>summary::after{content:"\2212"}
.lx-ss__lvl>summary:focus-visible,.lx-ss__wk>summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:-3px;border-radius:12px}
.lx-ss__lvl[open]>summary{border-bottom:1px solid var(--edge)}
.lx-ss__lvl__bd{padding:12px}

.lx-ss__wk{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.lx-ss__wk+.lx-ss__wk{margin-top:9px}
.lx-ss__wk>summary{padding:11px 12px}
.lx-ss__wk>summary b{font:900 14px/1.05 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.015em;color:#e6ebf2}
@media (min-width:560px){.lx-ss__wk>summary b{font-size:16px}}
.lx-ss__wk__bd{padding:0 10px 11px}
.lx-ss__note{margin:0 0 10px;padding:9px 11px;border-radius:10px;
  border-left:2px solid var(--accent-line);background:rgba(255,255,255,.035);
  font:400 12.5px/1.55 'Inter','Inter Fallback',sans-serif;color:var(--ink-2);
  overflow-wrap:anywhere}
@media (min-width:560px){.lx-ss__note{font-size:13.5px}}

/* ---------- one session ---------- */
.lx-ss__grid{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0}
@media (min-width:820px){.lx-ss__grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.lx-ss__card{border:1px solid var(--line);border-radius:11px;padding:12px;
  background:linear-gradient(180deg,#0e131e,#0b0f18)}
.lx-ss__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:0 0 9px}
.lx-ss__hd h3{margin:0;font:900 16px/1.05 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.015em;color:#fff}
@media (min-width:560px){.lx-ss__hd h3{font-size:18px}}
.lx-ss__hd span{font:700 10px/1.2 'Inter','Inter Fallback',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:#7f8ca1}
.lx-ss__ref{margin-left:auto;font:600 9.5px/1.2 'Inter','Inter Fallback',sans-serif;
  letter-spacing:.06em;color:#5c6675}

/* the blocks — warm-up, main block, cool-down. Real names, real sets x reps. */
.lx-blk{margin:0;display:grid;gap:8px}
.lx-blk>div{display:grid;gap:3px}
@media (min-width:560px){.lx-blk>div{grid-template-columns:96px 1fr;gap:3px 12px;align-items:baseline}}
.lx-blk dt{font:800 9.5px/1.25 'Inter','Inter Fallback',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
@media (min-width:560px){.lx-blk dt{font-size:10px}}
/* only the main block is worth the green; a treadmill jog is not */
.lx-blk>div:not(.lx-blk--main) dt{color:#7f8ca1}
.lx-blk dd{margin:0;font:400 13px/1.6 'Inter','Inter Fallback',sans-serif;color:var(--ink-2);
  overflow-wrap:anywhere}
@media (min-width:560px){.lx-blk dd{font-size:14px}}
.lx-blk--main dd{color:#dfe5ee}

/* ---------- the movement wall ----------
   ⚠️ THE WHOLE POINT IS THAT IT IS NOT SIX. A category shows every movement its
   sessions use, 17 to 112 of them, so the tiles are small and there are a lot.

   WEIGHT. At rest each tile is a 300px-wide thumbnail, ~4 KB — a 112-tile wall is
   ~0.5 MB if every one of them is scrolled to, and every one is loading="lazy", so a
   visitor who does not reach the wall downloads none. The animation behind a tile
   averages 1.2 MB, which is why it is fetched only when the tile is tapped, and why
   js/library-cat.js allows exactly one of them to be playing. */
.lx-wall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;list-style:none;margin:0;padding:0}
@media (min-width:560px){.lx-wall__grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}}
@media (min-width:900px){.lx-wall__grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}}
/* align-items:stretch is defensive, and deliberately kept.

   A tile is a <button> and .lx-mv__ph holds only absolutely-positioned children, so if
   the flex alignment ever resolves to flex-start the box collapses to 0 wide and
   aspect-ratio:4/3 then makes it 0 tall — the picture would still be fetched and
   decoded, just painted into nothing. stretch removes that whole failure mode.

   ⚠️ AN EARLIER VERSION OF THIS COMMENT CLAIMED THAT COLLAPSE WAS HAPPENING ON THE
   LIVE SITE. IT IS NOT, AND THE CLAIM WAS RETRACTED AFTER RE-MEASURING. Checked on the
   two pages it named, live, at a 375px layout viewport: .lx-mv__ph is 161x120 on BOTH
   /workouts-splits and /workout-plan-powerlifting, and the tile's computed
   align-items is `normal`, not `flex-start`. The six-tile strip's real fault was that
   it was six tiles of a near-square image letterboxed into a short box — which is what
   this build replaces — not a collapsed layout. Do not re-file this as a live bug
   without measuring it again first. */
.lx-mv--sm{border-radius:10px;align-items:stretch}
/* 4/3 like the strip: the clips run from 340x878 to 1200x494 and a common box has to
   contain them, not crop them, or half the movements lose the bar. */
.lx-mv--sm .lx-mv__ph{aspect-ratio:4/3;width:100%}
.lx-mv--sm .lx-mv__play{right:4px;bottom:4px;width:19px;height:19px}
.lx-mv--sm .lx-mv__play svg{width:7px;height:7px}
/* ⚠️ THE NAME IS NEVER TRUNCATED. Two clamps were tried and both were wrong:
   `-webkit-line-clamp` does nothing at all on a flex item (Chrome resolves
   `display:-webkit-box` to `flow-root` there — measured), and a plain max-height cut
   "Deficit Hex Bar Deadlift From Frame" down to "...From" with no ellipsis. Names run
   to 60 characters and a movement a visitor cannot read the name of is no use to
   them, so the tile grows instead. Grid equalises the row, so it still reads straight. */
.lx-mv--sm .lx-mv__nm{padding:6px 7px 7px;font-size:10.5px;line-height:1.15;
  overflow-wrap:anywhere}
@media (min-width:560px){.lx-mv--sm .lx-mv__nm{font-size:12px;padding:7px 8px 8px}}
/* the one that is playing has to be findable in a wall of a hundred */
.lx-mv--sm[data-playing]{border-color:var(--accent-line);
  box-shadow:0 0 0 1px var(--accent-line),0 0 24px -12px var(--accent-glow)}

/* ---------- the movements with no published animation ----------
   ⚠️ THEY ARE NOT HIDDEN. Only about a quarter of the library's clips are published to
   the website, so a wall of animations is a subset — and hiding the remainder is
   exactly the move that produced the six-tile strip. Every one of them is already
   written out in the session it belongs to, with its sets and reps; this repeats them
   as a plain checkable list, closed by default so it costs the page nothing. */
.lx-wall__rest{margin-top:16px}
.lx-wall__names{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}
.lx-wall__names li{padding:4px 9px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:#9dabbe;overflow-wrap:anywhere;
  font:600 11px/1.35 'Inter','Inter Fallback',sans-serif}
@media (min-width:560px){.lx-wall__names li{font-size:12px}}

@media (prefers-reduced-motion:reduce){
  .lx-mv--sm{transition:none}.lx-mv--sm:hover{transform:none}
}