/* On-site document preview for the module examples (see doc-viewer.js).
   Built from the palette already on the page: ink #0c141c / #131a22, card
   #15222e, hairlines #ffffff12–17, amber #ff9900 / #ffb752 / #ffce8a. */

/* Examples show straight away: the thumbnails are what explains the output. */
.examples-toggle[hidden]{display:none!important;}
.examples-panel{margin-top:22px;}
.module-chapter .mslide:nth-child(4) > .mslide-note{margin-bottom:0;}

/* ---------- cards ---------- */
.doc-card{position:relative;}
.doc-shot{position:relative; overflow:hidden;}
.doc-shot img{transition:transform 600ms cubic-bezier(.2,.9,.25,1);}
.doc-link:hover .doc-shot img{transform:scale(1.03);}
.doc-zoom{
  position:absolute; right:12px; bottom:12px;
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:rgba(19,26,34,.86); border:1px solid rgba(255,183,82,.45); color:#ffb752;
  opacity:.9; transform:scale(.94);
  transition:opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.25,1), background-color 220ms ease;
}
.doc-zoom svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;}
.doc-link:hover .doc-zoom,.doc-link:focus-visible .doc-zoom{opacity:1; transform:scale(1); background:#ff9900; color:#131a22; border-color:#ff9900;}
/* room at the bottom of the card for the secondary download link */
.doc-card .doc-body{padding-bottom:20px;}
.doc-download{
  position:absolute; right:16px; bottom:18px; z-index:1;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; line-height:1; color:#8b959f; text-decoration:none;
  padding:4px 0; transition:color 200ms ease;
}
.doc-download svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.doc-download span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.doc-download:hover{color:#ffce8a;}
.doc-download:focus-visible{outline:2px solid #ff9900; outline-offset:3px; border-radius:3px;}

/* ---------- viewer ---------- */
html.dv-open{overflow:hidden;}
.doc-viewer{position:fixed; inset:0; z-index:10000;}
.doc-viewer[hidden]{display:none;}
.dv-backdrop{
  position:absolute; inset:0; background:rgba(6,11,16,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity 220ms ease;
}
.dv-dialog{
  position:absolute; inset:clamp(12px,3vh,32px) clamp(12px,4vw,56px);
  max-width:1040px; margin:0 auto;
  display:flex; flex-direction:column; overflow:hidden;
  background:#131a22; border:1px solid #ffffff17; border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity 220ms ease, transform 280ms cubic-bezier(.2,.9,.25,1);
}
.doc-viewer.is-open .dv-backdrop{opacity:1;}
.doc-viewer.is-open .dv-dialog{opacity:1; transform:none;}

.dv-bar{
  display:flex; align-items:center; gap:18px; flex-shrink:0;
  padding:16px 18px 16px 24px; border-bottom:1px solid #ffffff12;
  border-top:2px solid #ffb752; background:#15222e;
}
.dv-meta{min-width:0; flex:1;}
.dv-kicker{display:block; font-size:10px; color:#ff9900; letter-spacing:.06em; margin-bottom:5px;}
.dv-title{
  margin:0; font-family:inherit; font-weight:600; font-size:17px; line-height:1.3; color:#fff;
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dv-count{font-size:11px; color:#a8b1ba; white-space:nowrap; font-variant-numeric:tabular-nums;}
.dv-download{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:1px solid #ffffff24; border-radius:8px; color:#dce1e6; text-decoration:none;
  font-size:13px; font-weight:500; white-space:nowrap;
  transition:border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.dv-download svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.dv-download:hover{border-color:rgba(255,183,82,.6); color:#ffce8a; background:rgba(255,153,0,.06);}
.dv-close{
  display:grid; place-items:center; width:40px; height:40px; flex-shrink:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.07); color:#fff;
  font-size:15px; cursor:pointer; transition:background-color 200ms ease;
}
.dv-close:hover{background:rgba(255,255,255,.14);}
.dv-download:focus-visible,.dv-close:focus-visible,.dv-scroll:focus-visible{outline:2px solid #ff9900; outline-offset:2px;}

.dv-scroll{
  flex:1; overflow:auto; overscroll-behavior:contain;
  background:radial-gradient(ellipse 700px 400px at 50% 0%,rgba(255,153,0,.05),transparent 70%),#0c141c;
  padding:32px clamp(12px,4vw,40px) 40px;
}
.dv-pages{display:grid; gap:24px; max-width:860px; margin:0 auto;}
.dv-page{
  display:block; width:100%; height:auto; aspect-ratio:1400/1981;
  background:#fff; border-radius:4px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  opacity:.001; transition:opacity 300ms ease;
}
.dv-page.is-loaded{opacity:1;}
.dv-page{cursor:zoom-in;}
.dv-pages.is-zoomed{max-width:none; width:min(1400px,230%);}
.dv-pages.is-zoomed .dv-page{cursor:zoom-out;}

@media (max-width:640px){
  .dv-dialog{inset:0; border-radius:0; border:0;}
  .dv-bar{flex-wrap:wrap; gap:10px 12px; padding:12px 12px 12px 16px;}
  .dv-meta{flex-basis:calc(100% - 56px);}
  .dv-title{font-size:15px; white-space:normal;}
  .dv-count{order:3; flex:1;}
  .dv-download{order:4; min-height:36px; font-size:12.5px;}
  .dv-close{order:2;}
  .dv-scroll{padding:14px 10px 24px;}
  .dv-pages{gap:14px;}
}
@media (prefers-reduced-motion:reduce){
  .dv-backdrop,.dv-dialog,.dv-page,.doc-zoom,.doc-shot img{transition:none!important;}
}