/* Viewer adapted from the MIT-licensed service-portal document preview.
   All layout and controls use this prototype's tokens; no portal runtime dependency. */
.media-preview-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.media-preview-link:hover { color: inherit; text-decoration: none; }
.media-preview { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; overflow: hidden; background: var(--scrim-strong); color: var(--on-dark-text); }
.media-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex: none; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--on-dark-divider); background: linear-gradient(to bottom, var(--scrim), transparent); }
.media-preview-heading { min-width: 0; }
.media-preview-heading h2 { margin: 0; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-preview-heading p { display: flex; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--on-dark-muted); white-space: nowrap; }
#media-preview-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#media-preview-counter { flex: none; }
.media-preview-actions, .media-preview-navigation, .media-preview-zoom { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.media-preview-button { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: var(--space-2); min-width: 44px; height: 44px; padding: 0 var(--space-2); font: inherit; text-decoration: none; }
.media-preview-button:hover { background: var(--on-dark-hover); }
.media-preview-button[aria-expanded="true"] { background: var(--on-dark-rest); }
.media-preview-button:disabled { opacity: var(--opacity-disabled); cursor: default; }
.media-preview-button:focus-visible, .media-preview-stage:focus-visible { outline: 2px solid var(--white); outline-offset: -3px; }
.media-preview [hidden] { display: none !important; }
.media-preview-body { display: flex; flex: 1; min-height: 0; }
.media-preview-canvas { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; }
.media-preview-navigation { position: absolute; inset-inline: clamp(var(--space-8), 4vw, var(--space-16)); top: 50%; transform: translateY(-50%); justify-content: space-between; pointer-events: none; }
.media-preview-navigation .media-preview-button { pointer-events: auto; width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-full); background: var(--scrim-strong); border: 1px solid var(--on-dark-divider); }
.media-preview-stage { flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.media-preview-pages { --document-scale: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; width: max-content; min-width: 100%; padding: 24px; box-sizing: border-box; }
.document-sheet-frame { position: relative; width: calc(794px * var(--document-scale)); height: calc(1123px * var(--document-scale)); flex: none; }
.document-sheet { display: flex; flex-direction: column; box-sizing: border-box; width: 794px; height: 1123px; padding: 54px 58px 38px; transform: scale(var(--document-scale)); transform-origin: top left; background: var(--white); color: var(--grey-900); box-shadow: 0 3px 16px #0004; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.document-sheet-header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--primary-red); padding-bottom: 14px; font-size: 13px; font-weight: 600; }
.document-sheet-header span:last-child { color: var(--primary-red); }
.document-sheet-kicker { margin: 32px 0 8px; font-size: 12px; color: var(--grey-600); text-transform: uppercase; letter-spacing: .05em; }
.document-sheet h1 { margin: 0 0 24px; font-size: 27px; line-height: 1.25; }
.document-sheet h2 { margin: 22px 0 10px; font-size: 19px; line-height: 1.3; }
.document-sheet p { margin-bottom: 14px; }
.document-sheet-facts { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin: 0 0 10px; padding: 16px; background: var(--grey-100); }
.document-sheet-facts dt { color: var(--grey-600); font-size: 12px; }
.document-sheet-facts dd { margin: 0; font-weight: 600; }
.document-sheet-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; margin: 6px 0 16px; }
.document-sheet-table th, .document-sheet-table td { padding: 9px 10px; border-bottom: 1px solid var(--grey-200); text-align: left; vertical-align: top; }
.document-sheet-table th { background: var(--grey-100); font-weight: 600; }
.document-sheet-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--grey-300); font-size: 11px; color: var(--grey-600); }
.media-preview-meta { flex: 0 0 320px; box-sizing: border-box; padding: var(--space-5); overflow-y: auto; border-left: 1px solid var(--on-dark-divider); }
.media-preview-meta a { color: var(--on-dark-text); }
.media-preview-meta h3 { font-size: var(--text-base); margin: 0 0 var(--space-5); }
.media-preview-meta dl { margin: 0; overflow-wrap: anywhere; }
.media-preview-meta dt { margin-top: var(--space-4); color: var(--on-dark-text); font-size: var(--text-xs); }
.media-preview-meta dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.media-preview-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-top: 1px solid var(--on-dark-divider); background: var(--scrim); flex: none; }
.media-preview-controls > span { justify-self: end; font-size: var(--text-xs); white-space: nowrap; }
.media-preview-controls .media-preview-zoom { grid-column: 2; }
.media-preview-readout { min-width: 66px; font-variant-numeric: tabular-nums; }
#documents-tbody tr[data-id] { cursor: pointer; }
#documents-tbody tr[data-id]:focus-visible { outline: 2px solid var(--interactive-blue); outline-offset: -2px; }
.image-preview .media-preview-pages { min-height: 100%; justify-content: center; }
.media-image-frame { flex: none; }
.media-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; border-radius: var(--radius-sm); }
@media (max-width: 767px) {
  .media-preview-bar { padding: var(--space-2) var(--space-3); gap: var(--space-2); align-items: flex-start; }
  .media-preview-heading h2 { font-size: var(--text-sm); }
  .media-preview-body { flex-direction: column; }
  .media-preview-meta { flex: 0 1 auto; max-height: 40%; border-left: 0; border-top: 1px solid var(--on-dark-divider); padding: var(--space-4); }
  .media-preview-controls { gap: var(--space-1); padding: var(--space-1) var(--space-2); }
  .media-preview-controls .media-preview-button { padding-inline: var(--space-1); }
  .media-preview-readout { min-width: 54px; }
}