/* =========================================================================
   CONTENTS MODAL — the book, opened over a lesson.

   Chrome only. The book inside is styled by flipbook.css, which is loaded
   alongside this file the first time a reader opens the contents.

   Everything is scoped under .gcm and nothing is loaded until it is asked
   for, so a lesson page that never opens the contents pays nothing for it.
   ========================================================================= */

.gcm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:clamp(.5rem,2vw,1.4rem);
  font-family:'Syne',system-ui,-apple-system,sans-serif}

.gcm-back{position:absolute;inset:0;background:rgba(6,14,18,.72);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .28s ease}
.gcm.on .gcm-back{opacity:1}

.gcm-panel{position:relative;display:flex;flex-direction:column;
  width:min(100%,72rem);max-height:100%;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.28,1)}
.gcm.on .gcm-panel{opacity:1;transform:none}

/* ---------- the bar ---------- */
.gcm-bar{display:flex;align-items:center;gap:1rem;padding:.2rem .2rem .8rem}
.gcm-title{flex:1;min-width:0;font-weight:700;font-size:.76rem;letter-spacing:.06em;
  color:rgba(244,237,224,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcm-close{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;cursor:pointer;
  font-size:1rem;line-height:1;color:#E4C96B;background:rgba(18,48,57,.75);
  border:1px solid rgba(201,162,39,.4);transition:.15s}
.gcm-close:hover{background:rgba(201,162,39,.18)}

/* ---------- page controls ---------- */
.gcm-nav{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.9rem 0 .2rem}
.gcm-nav button{width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(201,162,39,.4);background:rgba(18,48,57,.75);color:#E4C96B;
  font-size:1.2rem;line-height:1;transition:.15s}
.gcm-nav button:hover:not(:disabled){background:rgba(201,162,39,.16)}
.gcm-nav button:disabled{opacity:.3;cursor:default}
.gcm-nav span{font-weight:700;font-size:.72rem;letter-spacing:.1em;min-width:4rem;
  text-align:center;color:rgba(244,237,224,.68);font-variant-numeric:tabular-nums}

/* ---------- while the book is fetched ----------
   A small riffling book, not a panel: the lesson behind stays readable, and
   the wait reads as the book being opened rather than as a stall. */
.gcm-load{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;min-height:min(52vh,22rem);color:rgba(244,237,224,.7)}
.gcm-load p{margin:0;font-family:'Syne',system-ui,sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* the body must not scroll behind the modal, and must not lose its place */
body.gcm-open{position:fixed;left:0;right:0;overflow:hidden}

@media (max-width:48rem){
  .gcm{padding:.4rem}
  .gcm-bar{padding-bottom:.5rem}
  .gcm-title{font-size:.68rem}
  .gcm-nav{padding-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .gcm-back,.gcm-panel{transition:none}
}