/* Flipbook layout for Guide page */
.guide-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 120px);
  gap: 1rem;
  padding: 1rem 0 2rem;
}
@media (max-width: 980px){
  .guide-layout{ grid-template-columns: 1fr; }
  .side-nav{ order: 2 }
  .flipbook{ order: 1 }
}

.side-nav{
  position: sticky; top: 72px;
  align-self: start;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: .75rem;
}
.side-nav h2{
  font-family: var(--font-subheading);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: .25rem 0 .5rem;
  color: var(--clr-muted);
}
.side-nav nav a{
  display:block;
  padding: .5rem .6rem;
  border-radius: 10px;
  color: var(--clr-text);
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.side-nav nav a:hover{ background: rgba(255,255,255,.06) }
.side-nav nav a[aria-current="page"]{ background:#fff; color:#111; }

.flipbook .toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: .5rem;
}
.flipbook .toolbar button, .flipbook .toolbar input[type="range"]{
  background: transparent; color: var(--clr-text);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:.45rem .65rem;
}
.flipbook .toolbar .seg{
  display:inline-flex; border:1px solid rgba(255,255,255,.15); border-radius: 10px; overflow:hidden;
}
.flipbook .toolbar .seg button{
  border:0; border-right:1px solid rgba(255,255,255,.15)
}
.flipbook .toolbar .seg button:last-child{ border-right:0 }
.flipbook .toolbar .status{ margin-left:auto; color: var(--clr-muted) }

.viewer{
  margin-top: .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: clamp(.5rem, 1.5vw, 1rem);
  display:flex; justify-content:center; align-items:center;
  overflow: auto;
}
.spread{
  display:flex; gap: .5rem; align-items:flex-start; justify-content:center;
  transform-origin: center;
}
.spread canvas{ display:block; box-shadow: var(--shadow); border-radius: 6px; }
.spread .page-cover canvas{ box-shadow: 0 10px 30px rgba(0,0,0,.55) }

@media (prefers-reduced-motion: reduce){
  .spread{ transition:none !important }
}

/* Tiny helper for hidden when printing to fallback */
.noscript{
  border: 1px dashed rgba(255,255,255,.25);
  padding: .75rem; border-radius: 10px; margin-top:.75rem;
}

/* Outline list styling */
.side-nav nav ul{ list-style:none; margin:0; padding:0 }
.side-nav nav li{ margin:0 }
.side-nav nav ul ul{ padding-left:.6rem; border-left:1px solid rgba(255,255,255,.08); margin-left:.4rem }
.side-nav nav a{ text-transform:uppercase; font-weight:600; letter-spacing:.08em }


/* --- Outline nav overrides to avoid global header nav styles --- */
.side-nav nav ul{ list-style:none; margin:0; padding:0; display:block !important; }
.side-nav nav li{ margin:0 0 .25rem 0; }
.side-nav nav a{
  display:block; padding:.45rem .6rem; border-radius:10px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.side-nav{ max-height: calc(100vh - 120px); overflow:auto; }

/* --- Subtle page-turn animation --- */
.viewer{ perspective: 1600px; }
.spread.turn-next{ animation: turnNext .35s ease-in-out; }
.spread.turn-prev{ animation: turnPrev .35s ease-in-out; }
@keyframes turnNext{
  0%{ transform: rotateY(0deg) translateX(0); opacity:1 }
  50%{ transform: rotateY(-12deg) translateX(-6px); opacity:.95 }
  100%{ transform: rotateY(0deg) translateX(0); opacity:1 }
}
@keyframes turnPrev{
  0%{ transform: rotateY(0deg) translateX(0); opacity:1 }
  50%{ transform: rotateY(12deg) translateX(6px); opacity:.95 }
  100%{ transform: rotateY(0deg) translateX(0); opacity:1 }
}