/* /for-teachers: what the page adds on top of audience.css.

   The proof band becomes a pile of marked pages as the page scrolls. Each card sticks under the
   nav, and the next one slides up over it; the covered card settles under it, a little smaller,
   a little higher and a shade darker. It is an original equivalent of the stacking cards in
   .design-refs/reference/magicschool/DISSECTION.md (M8), drawn in our tokens. The pile is CSS
   (position: sticky); for-teachers.js only writes --cover (0 to 1) on a covered card while the
   band is on screen, from the scroll position, so nothing moves on an idle page. Only transform
   and opacity change. Under reduced motion, or on a screen too short to hold a card, the band
   stays the template's row of three. */

/* the hero without its illustration: the text takes the width */
.aud-hero .container:has(> .aud-hero-art:empty){grid-template-columns:minmax(0,1fr)}
.aud-hero-art:empty{display:none}

/* the value grid follows the tinted band directly, so it needs its own top space */
.ft-stack + .section.top-0{padding-top:clamp(56px,6.4vw,92px)}

/* the student's line, above the feedback that is about it */
.ft-line{display:block;margin:2px 0 12px;padding:2px 0 2px 10px;border-left:2px solid var(--flag);font-family:var(--font-mono);font-weight:400;font-size:12.5px;line-height:1.5;letter-spacing:0;color:var(--slate)}
.aud-proof img{object-position:50% 18%}

@media (prefers-reduced-motion:no-preference) and (min-height:620px){
  .ft-stack .aud-proofs{display:block;max-width:880px;margin-inline:auto}
  .ft-stack .aud-proof{
    --i:0;
    position:sticky;top:calc(var(--nav-h) + 20px + var(--i) * 14px);z-index:calc(var(--i) + 1);
    min-height:var(--stack-h,0px);margin-bottom:24px;box-shadow:var(--shadow);transform-origin:50% 0
  }
  .ft-stack .aud-proof:nth-child(2){--i:1}
  .ft-stack .aud-proof:nth-child(3){--i:2}
  .ft-stack .aud-proof:last-child{margin-bottom:0}

  /* the shade a covered card settles into */
  .ft-stack .aud-proof::after{content:'';position:absolute;inset:0;background:var(--navy);opacity:calc(var(--cover,0) * .12);pointer-events:none;transition:opacity .22s var(--ease-out)}

  /* covered: up, smaller, from the top edge; arriving: the template's small rise, once */
  .js .ft-stack .aud-proofs.stagger>.aud-proof{
    --enter:14px;
    transform:translateY(calc(var(--enter) - var(--cover,0) * 10px)) scale(calc(1 - var(--cover,0) * .05));
    transition:transform .24s var(--ease-out)
  }
  .js .ft-stack .aud-proofs.stagger.in>.aud-proof{--enter:0px}

  .ft-stack .aud-proof img{height:160px}
  .ft-stack .aud-proof-text{font-size:20px;line-height:1.38}
}

/* wide: each card in the pile is a broad sheet, the marked page beside its words */
@media (prefers-reduced-motion:no-preference) and (min-height:620px) and (min-width:901px){
  .ft-stack .aud-proofs{max-width:820px}
  .ft-stack .aud-proof{display:grid;grid-template-columns:minmax(0,1fr);min-height:max(290px,var(--stack-h,0px))}
  .ft-stack .aud-proof.has-img{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* the page fills its half of the card without setting the card's height */
  .ft-stack .aud-proof.has-img img{height:0;min-height:100%;border-bottom:0;border-right:1px solid var(--rule-soft);object-position:50% 26%}
  .ft-stack .aud-proof-body{padding:34px 40px 28px;gap:12px}
  .ft-stack .aud-proof-text{font-size:25px;line-height:1.3;max-width:34ch}
  .ft-stack .aud-proof.has-img .aud-proof-text{font-size:21px;line-height:1.36}
  .ft-stack .ft-line{font-size:13.5px}
}