/* =====================================================================
   Document preview wrapper.

   The document's own CSS comes from packages/document — `quoteStyles()`,
   injected once at boot. Everything here is the frame around it: the
   sheet is a fixed 7.58in wide by design (it is a Letter page), so the
   viewport scales it to whatever width the column happens to be rather
   than letting it overflow.

   Nothing in this file touches anything inside `.cp-doc`.
   ===================================================================== */

.doc-preview {
  position: relative;
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--mat);
  padding: var(--s-4);
  overflow: hidden;
}

.doc-preview__viewport {
  /* Height is set in JS from the scaled content, because a transformed
     child no longer contributes its own height to the layout. */
  position: relative;
  overflow: hidden;
}

.doc-preview__scaler {
  /* Just a transform host. packages/document's own `@media screen` block gives `.cp-doc`
     the paper: 8.5in wide, white, page padding and a drop shadow. Re-decorating it here
     would draw a second sheet slightly offset behind the first. */
  box-sizing: content-box;
  transform-origin: top left;
  width: 8.5in;
}

/* Nothing to pin. packages/document scopes its own design tokens to `.cp-doc` and sets the
   sheet's ground and ink from them, so the paper stays paper in a dark theme without this
   file asserting a colour the PDF might not agree with. */

.doc-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.doc-preview__bar .chip {
  margin-left: auto;
}
.doc-preview__bar .btn--link {
  font-size: var(--t-xs);
  /* The bar sits on the mat, which is darker than a card: the standard link blue
     measures 4.2:1 there, one step down measures 4.9:1. */
  color: var(--cta-strong);
}

.doc-preview__caption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* A long district runs to two or three pages. Cap the preview and let it
   scroll rather than pushing the totals off the screen. */
.doc-preview--scroll .doc-preview__viewport {
  max-height: min(58vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 560px) {
  .doc-preview {
    padding: var(--s-2);
  }
}