/* On-page document previews. All rules are confined to these two top layers. */
html.document-preview-open,
html.document-preview-open body { overflow: hidden; }

.document-preview {
  position: fixed;
  inset: 0;
  width: min(1100px,calc(100vw - 40px));
  height: min(900px,calc(100svh - 40px));
  height: min(900px,calc(100dvh - 40px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dedfda;
  border-radius: 20px;
  background: #fff;
  color: #252722;
  box-shadow: 0 24px 80px rgba(15,20,12,.23);
  font-family: var(--portfolio-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  touch-action: auto;
  overscroll-behavior: contain;
}
.document-preview:not([open]) { display: none; }
.document-preview [hidden] { display: none !important; }
.document-preview::backdrop {
  background: rgba(25,28,22,.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.document-preview__shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.document-preview__header { display: grid; grid-template-columns: minmax(0,1fr) auto 44px; align-items: center; gap: 16px; flex: 0 0 auto; margin: 0; padding: 16px 18px 16px 24px; border-bottom: 1px solid #e5e6e1; background: #fff; }
.document-preview__heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.document-preview__heading > div { min-width: 0; }
.document-preview__type { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; min-height: 44px; border: 1px solid #e1e4dc; border-radius: 9px; background: #f7f8f5; color: #62675b; font-size: .625rem; font-weight: 500; letter-spacing: .06em; }
.document-preview .document-preview__heading h2 { margin: 0; color: #252722; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: pretty; }
.document-preview__meta { margin: .25rem 0 0; color: #6c7166; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
.document-preview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.document-preview__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: .5rem .75rem; border: 1px solid #dfe3d9; border-radius: 8px; background: #fff; color: #363d2f; font: inherit; font-size: .78125rem; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; transition: background-color .15s ease,border-color .15s ease; }
.document-preview__actions a:is(:hover,:focus-visible) { border-color: #bac5ad; background: #f4f7ef; text-decoration: none; }
.document-preview__actions a svg { display: block; flex-shrink: 0; width: 15px; height: 15px; }
.document-preview__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1f3ee; color: #363d2f; font: inherit; cursor: pointer; transition: background-color .15s ease; }
.document-preview__close svg { display: block; width: 19px; height: 19px; }
.document-preview__close:is(:hover,:focus-visible) { background: #e5eadf; }
.document-preview__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid #dfe3d8; background: #fafbf8; }
.document-preview__pager,
.document-preview__zoom { display: flex; align-items: center; gap: 4px; min-width: 0; }
.document-preview__toolbar button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; margin: 0; padding: 8px; border: 1px solid #dfe3d9; border-radius: 8px; background: #fff; color: #363d2f; font: inherit; font-size: .75rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .15s ease,border-color .15s ease; }
.document-preview__toolbar button:not(:disabled):is(:hover,:focus-visible) { border-color: #bac5ad; background: #f1f5e9; }
.document-preview__toolbar button:disabled { opacity: .38; cursor: default; }
.document-preview__toolbar button svg { display: block; width: 17px; height: 17px; }
.document-preview__toolbar .document-preview__fit { padding-inline: 10px; }
.document-preview__page { min-width: 66px; padding-inline: 4px; color: #62675b; font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1.4; text-align: center; white-space: nowrap; }
.document-preview__viewport { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; background: #eceee8; overscroll-behavior: contain; touch-action: auto; scrollbar-width: thin; scrollbar-color: #b8c0ae transparent; }
.document-preview__canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
.document-preview__page-image { display: block; max-width: none; max-height: none; margin: 0; background: #fff; box-shadow: 0 3px 16px rgba(34,42,27,.15); -webkit-user-drag: none; }
.document-preview__status { position: absolute; left: 50%; top: 50%; max-width: calc(100% - 32px); margin: 0; padding: 12px 16px; border: 1px solid #dde3d4; border-radius: 10px; background: rgba(255,255,255,.97); color: #62675b; font-size: .875rem; line-height: 1.6; text-align: center; transform: translate(-50%,-50%); pointer-events: none; }
body .document-preview :is(a,button,[tabindex]):focus-visible { outline: 2px solid #34432b; outline-offset: 3px; }
body .document-preview .document-preview__close:focus-visible { border-radius: 50%; }
.document-preview__viewport:focus-visible { outline-offset: -4px !important; }

/* A manual popover keeps the thumbnail clear of clipping and stacking contexts. */
.document-file-preview { position: fixed; inset: auto; width: min(260px,calc(100vw - 24px)); max-width: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e0e3dc; border-radius: 14px; background: #fff; color: #252722; box-shadow: 0 12px 36px rgba(26,34,19,.17); font-family: var(--portfolio-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif); line-height: 1.4; }
.document-file-preview[popover]:not(:popover-open),
.document-file-preview[hidden] { display: none; }
.document-file-preview > img { display: block; width: 100%; height: 220px; max-height: 220px; padding: 12px; border-bottom: 1px solid #e4e7df; background: #f4f6ef; object-fit: contain; }
.document-file-preview__copy { padding: 12px 14px 14px; }
.document-file-preview__eyebrow { margin: 0 0 5px; color: #7a826f; font-size: .625rem; font-weight: 500; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
.document-file-preview__title { margin: 0; color: #252d1f; font-size: .875rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.document-file-preview__meta { margin: 6px 0 0; color: #69725e; font-size: .6875rem; line-height: 1.4; }

@media (max-width:640px) {
  .document-preview { width: calc(100vw - 16px); height: calc(100svh - 16px); height: calc(100dvh - 16px); border-radius: 16px; }
  .document-preview__header { grid-template-columns: minmax(0,1fr) 44px; gap: 10px; padding: 12px; }
  .document-preview__heading { grid-column: 1; grid-row: 1; gap: 10px; }
  .document-preview .document-preview__heading h2 { font-size: .9375rem; }
  .document-preview__type { flex-basis: 34px; width: 34px; min-height: 36px; font-size: .5625rem; }
  .document-preview__close { grid-column: 2; grid-row: 1; align-self: start; }
  .document-preview__actions { grid-column: 1/-1; grid-row: 2; }
  .document-preview__actions a { flex: 1 1 0; }
  .document-preview__toolbar { padding: 8px 12px; }
}
@media (max-width:380px) {
  .document-preview__toolbar { justify-content: center; }
}
@media (prefers-reduced-motion:reduce) {
  .document-preview,
  .document-preview *,
  .document-file-preview,
  .document-file-preview * { animation: none !important; transition: none !important; }
}
@media print {
  .document-preview,
  .document-file-preview { display: none !important; }
  html.document-preview-open,
  html.document-preview-open body { overflow: visible; }
}