/* mag-fold.css v2 — progressive-disclosure layer (minimize on-screen text)
   Pure enhancement keyed on existing class names. Loaded after style.css/mag.css.
   Everything degrades gracefully: without JS the .foldable classes are never
   added, so the original layout is unchanged. */

/* ---- shared smooth height-fold primitive (grid 0fr->1fr) ---------------- */
.fold-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.fold-wrap>.fold-inner{overflow:hidden;min-height:0}
.is-open>.fold-wrap,.fold-open>.fold-wrap,
.is-open>div>.fold-wrap{grid-template-rows:1fr}

/* chevron */
.fold-chev{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);color:var(--primary);display:grid;place-items:center;cursor:pointer;
  font-size:.8rem;line-height:1;transition:transform .3s ease,background .2s,color .2s;padding:0}
.fold-chev::before{content:"\25BC"}
.is-open>.fold-chev,.is-open .fold-chev,.fold-open .fold-chev{transform:rotate(180deg)}

/* =======================================================================
   1. SUBJECT CARDS — icon forward, blurb reveals on hover/focus
   ======================================================================= */
.subj-card.foldable p{
  min-height:0;max-height:0;margin:0;opacity:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .25s,margin .32s}
.subj-card.foldable .sc-ico{font-size:2.5rem;transition:transform .28s ease}
.subj-card.foldable:hover,.subj-card.foldable:focus-within{transform:translateY(-4px)}
.subj-card.foldable:hover p,.subj-card.foldable:focus-within p{
  max-height:6em;opacity:1;margin:0 0 .9rem}
.subj-card.foldable:hover .sc-ico,.subj-card.foldable:focus-within .sc-ico{transform:scale(1.06) rotate(-4deg)}
@media (hover:none){
  /* touch: no hover — show a tighter 2-line clamp so text stays minimal */
  .subj-card.foldable p{max-height:2.9em;opacity:.85;margin:0 0 .7rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* =======================================================================
   2. UNIT ROWS — accordion. Collapsed = number + title + tags + actions.
   ======================================================================= */
.unit.foldable{flex-wrap:wrap;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.unit.foldable:hover{border-color:var(--sc,var(--primary))}
.unit.foldable.is-open{box-shadow:0 6px 22px -12px rgba(20,10,60,.35)}
.unit.foldable .u-head{display:flex;align-items:center;gap:1rem;flex:1 1 100%;min-width:0}
.unit.foldable .u-head>.u-n{margin:0}
.unit.foldable .u-htext{flex:1;min-width:0}
.unit.foldable .u-htext h3{margin:0;font-size:1.05rem;line-height:1.25}
.unit.foldable .u-tags{margin:.35rem 0 0}
.unit.foldable .u-fold{flex:1 1 100%}
.unit.foldable .u-fold .fold-inner p{margin:.65rem 0 0;color:var(--ink2);font-size:.9rem;line-height:1.55}
.unit.foldable .u-act{flex:none;margin-left:auto}
@media (max-width:640px){.unit.foldable .u-act{flex:1 1 100%;margin:.6rem 0 0}}

/* =======================================================================
   3. LESSON — chapters accordion. Collapsed = number + title + 1-line teaser.
   ======================================================================= */
.lchap{border:1px solid var(--line);border-radius:14px;margin:.7rem 0;overflow:hidden;
  background:var(--card);transition:border-color .2s,box-shadow .2s}
.lchap.is-open{border-color:var(--primary);box-shadow:0 8px 26px -16px rgba(20,10,60,.4)}
.lchap-head{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  padding:1rem 1.15rem;cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.lchap-head:hover{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.lchap-num{flex:none;width:28px;height:28px;border-radius:8px;background:var(--bg);
  border:1px solid var(--line);display:grid;place-items:center;font-weight:800;
  font-size:.82rem;color:var(--primary)}
.lchap.is-open .lchap-num{background:var(--primary);color:#fff;border-color:var(--primary)}
.lchap-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.lchap-title{font-family:var(--display,inherit);font-weight:700;font-size:1.08rem;line-height:1.25}
.lchap-tease{font-size:.8rem;line-height:1.4;color:var(--ink2);opacity:.75;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  transition:opacity .25s,max-height .3s}
.lchap.is-open .lchap-tease{display:none}
.lchap-body{padding:0 1.15rem}
.lchap-body>.fold-wrap>.fold-inner{padding-bottom:.2rem}
.lchap.is-open .lchap-body>.fold-wrap>.fold-inner{padding-bottom:1.1rem}
.lchap-body h2{display:none} /* the moved h2 becomes the header title, hide the original */

/* =======================================================================
   4. KEY TERMS — tap/hover to reveal definition
   ======================================================================= */
.term.foldable{cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.term.foldable:hover,.term.foldable.is-open{border-color:var(--primary)}
.term.foldable span{max-height:0;opacity:0;margin-top:0;overflow:hidden;display:block;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s,margin-top .3s}
.term.foldable::after{content:"tap to reveal";position:absolute;right:.9rem;top:.85rem;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink2);opacity:.6;transition:opacity .2s}
.term.foldable:hover span,.term.foldable.is-open span{max-height:8em;opacity:1;margin-top:.15rem}
.term.foldable:hover::after,.term.foldable.is-open::after{opacity:0}
@media (hover:none){.term.foldable::after{content:"tap"}}

/* =======================================================================
   5. TAKEAWAY + EVIDENCE — heading stays, body folds
   ======================================================================= */
.tk-fold h3{display:flex;align-items:center;gap:.6rem;cursor:pointer;margin-bottom:0}
.tk-fold h3 .fold-chev{margin-left:auto}
.tk-fold.is-open h3{margin-bottom:.4rem}
.ev-fold .ev-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.ev-fold .ev-toggle .fold-chev{margin-left:auto}

/* =======================================================================
   6. FLY-IN sweep (added by JS; reduced-motion users never get .mgf-pre)
   ======================================================================= */
.mgf-pre{opacity:0;transform:translateY(16px)}
.mgf-in{animation:mgfIn .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes mgfIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =======================================================================
   7. SECTION FAB — floating bottom-right, gentle idle bob
   ======================================================================= */
#mgf-fab{position:fixed;right:14px;bottom:14px;z-index:9989;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--primary);
  font-size:1.25rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 28px -10px rgba(20,10,60,.45);
  animation:mgfBob 3.6s ease-in-out infinite;transition:transform .25s,box-shadow .25s}
#mgf-fab:hover{transform:scale(1.08);animation-play-state:paused}
#mgf-fab.open{animation:none;transform:rotate(90deg)}
@keyframes mgfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#mgf-menu{position:fixed;right:14px;bottom:76px;z-index:9989;min-width:210px;max-width:78vw;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.45rem;
  box-shadow:0 18px 44px -14px rgba(20,10,60,.5);display:none;flex-direction:column;gap:2px}
#mgf-menu.open{display:flex;animation:mgfMenu .28s cubic-bezier(.2,.7,.3,1)}
@keyframes mgfMenu{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
#mgf-menu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:.86rem;color:inherit;padding:.5rem .65rem;border-radius:9px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mgf-menu button:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)}
#mgf-menu .mgf-act{font-weight:700}
#mgf-menu .mgf-sep{height:1px;background:var(--line);margin:.3rem .2rem}
@media (max-width:640px){#mgf-fab{width:48px;height:48px;bottom:12px;right:10px}#mgf-menu{right:10px;bottom:68px}}

@media (prefers-reduced-motion:reduce){
  .fold-wrap,.subj-card.foldable p,.term.foldable span,.fold-chev{transition:none}
  #mgf-fab{animation:none}
  .mgf-pre{opacity:1;transform:none}
  .mgf-in{animation:none}
}