/**
 * Inline PDF renderer — shared styling for static/components/pdf-inline-viewer.js.
 *
 * Loaded by all three surfaces (article shell, advanced-map News Item panel,
 * admin news review dialog). Surfaces tune the two custom properties rather
 * than overriding the rules, so the page treatment stays identical everywhere.
 *
 * ⚠️ The container must NEVER get a height or an `overflow` value. The whole
 * point of this renderer is that the host page's scrollbar is the only one —
 * a fixed height here reintroduces exactly the nested scroller the iframe had.
 */

.mh-pdfdoc {
  --mh-pdf-gap: 12px;
  --mh-pdf-page-bg: #ffffff;

  display: block;
  width: 100%;
  /* height and overflow are deliberately unset — see the warning above. */
}

.mh-pdfdoc__pages {
  display: flex;
  flex-direction: column;
  gap: var(--mh-pdf-gap);
  width: 100%;
}

/* The escape hatch out of the rasterised reader — zoom, search, print and
   download all live one click away in the browser's own viewer. Emitted by
   buildOpenLink for every surface that does not declare its own (the article
   shell and the admin dialog do).

   It scrolls away with the document rather than pinning, which matches the
   article shell's control strip. Pinning it would mean an overlay inside a
   container that must never establish its own scroll context. */
.mh-pdfdoc__actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--mh-pdf-gap);
}

.mh-pdfdoc__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: #fff;
  color: #1f2937;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.mh-pdfdoc__open:hover,
.mh-pdfdoc__open:focus-visible {
  background: #f5f7fb;
  text-decoration: none;
}

/* One page. The inline `aspect-ratio` set by the renderer holds the correct
   height from the outset, so the scroll height is right before anything has
   painted and releasing an off-screen canvas never shifts the page. */
.mh-pdfpage {
  position: relative;
  width: 100%;
  /* The 1px border would otherwise sit OUTSIDE a 100% width and push the page
     2px past its container — enough to give the host a horizontal scrollbar,
     which is the class of bug this renderer exists to remove. Measured. */
  box-sizing: border-box;
  background: var(--mh-pdf-page-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  /* Nothing paints outside the flow, so the browser can skip layout and paint
     for pages far off screen. `auto` (not `hidden`) keeps them findable by
     in-page search and accessibility tooling. */
  content-visibility: auto;
}

.mh-pdfpage__canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Until a page's canvas lands, show a quiet placeholder rather than an empty
   white box — at the correct size, so this is purely a tint, never a shift. */
.mh-pdfpage:not(.is-rendered) {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.mh-pdfdoc__status {
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

.mh-pdfdoc__notice {
  margin: var(--mh-pdf-gap) 0 0;
  padding: 10px 12px;
  border-radius: 4px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
}

/* ── Fallback ─────────────────────────────────────────────────────────────
   Rendered when inline rendering is not possible — overwhelmingly because the
   row has not been mirrored to S3 yet, so the serve route 302s to a
   third-party host and PDF.js cannot read the bytes past CORS. The iframe has
   no such restriction. This keeps a fixed height because it IS the browser's
   own viewer, complete with its own scrollbar; that is the cost of the
   fallback and the reason it is a fallback. */
.mh-pdfdoc-fallback {
  display: block;
  width: 100%;
  height: 1200px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
}

.mh-pdfdoc-fallback > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 899px) {
  .mh-pdfdoc-fallback { height: 700px; }
}

@media print {
  .mh-pdfpage {
    break-inside: avoid;
    border: 0;
    /* Printing must not depend on how far the reader happened to scroll. */
    content-visibility: visible;
  }
}