/* The site's PDF reader (pdf-pages.js), from Joshua's design "Handout
   Reader Cleanup" (2026-10-31): the pages on a grey ground, a floating
   toolbar, and while loading a thin moving bar, placeholder pages and a
   "Loading…" pill. A reader showing it puts .has-pages on its .modal-body.
   Colours come from the page's own tokens (--accent, --paper, --rule …). */
:root{ --hv-pane: #eeeee9; }
[data-theme="dark"]{ --hv-pane: #0a0d10; }
.modal-pdf.hv-host{ position: relative; display: block; background: var(--hv-pane); container-type: inline-size; }
.hv-scroll{
  position: absolute; inset: 0; overflow: auto; box-sizing: border-box;
  padding: 32px 24px 112px; overscroll-behavior: contain;
}
.hv-scroll:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.hv-pages{ margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.hv-page{
  position: relative; flex: none; background: #fff; border-radius: 2px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,20,24,.08), 0 10px 30px rgba(16,20,24,.10);
}
.hv-page canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-sk{
  position: absolute; inset: 0; box-sizing: border-box; padding: 9.8% 10.8%;
  display: flex; flex-direction: column; gap: 11px;
}
.hv-sk i{
  display: block; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, #ececea 0%, #f6f6f4 40%, #ececea 80%);
  background-size: 200% 100%; animation: hv-sh 1.4s ease-in-out infinite;
}
.hv-page.is-drawn .hv-sk{ display: none; }
.hv-progress{
  position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; z-index: 2;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.hv-progress > div{ width: 40%; height: 100%; background: var(--accent); animation: hv-bar 1.2s ease-in-out infinite; }
.hv-float{
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 12px 32px rgba(16,20,24,.16);
}
.hv-float[hidden]{ display: none; }
.hv-bar{ gap: 2px; padding: 4px; }
.hv-status{ gap: 10px; height: 52px; box-sizing: border-box; padding: 0 20px 0 16px; font-size: 13px; color: var(--ink); }
.hv-status .hv-of{ font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12px; color: var(--muted); }
.hv-spin{
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent);
  animation: hv-spin .8s linear infinite;
}
.hv-tb{
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit;
}
.hv-tb:hover{ background: var(--soft); }
.hv-tb:disabled{ opacity: .35; cursor: default; background: none; }
.hv-tb:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.hv-count{ min-width: 56px; text-align: center; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv-zoom{ width: 56px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12px; }
.hv-sep{ width: 1px; height: 20px; background: var(--rule); margin: 0 6px; }
.hv-fail{ padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; }
@keyframes hv-sh{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
@keyframes hv-bar{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(250%); } }
@keyframes hv-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hv-sk i, .hv-progress > div, .hv-spin{ animation: none; } }

/* On a phone the pages sit above the title and comments, as the slides do,
   instead of an "Open PDF" button. */
@media (max-width: 620px){
  .modal-body.has-pages .modal-pdf.hv-host{ display: block !important; height: 78vh; }
  .modal-body.has-pages .mobile-pdf-btn{ display: none !important; }
  .has-pages .hv-float{ bottom: 14px; }
}
/* A narrow pages pane (a phone, or a tablet beside the sidebar) gets a
   smaller toolbar, so it never runs past the pane's edge. */
@container (max-width: 520px){
  .hv-scroll{ padding: 16px 12px 88px; }
  .hv-tb{ width: 38px; height: 38px; }
  .hv-count{ min-width: 44px; }
  .hv-zoom{ width: 46px; }
  .hv-sep{ margin: 0 2px; }
}

/* the design labels the comment fields */
.comment-form .cf-label{ display: none; }
.has-pages .comment-form .cf-label{ display: block; margin-bottom: -4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.has-pages #commentName::placeholder{ color: transparent; }