.documents-page .legal-document { --document-preview-height: 240px; container: documents / inline-size; }
.documents-intro { color: var(--text-muted); }
.documents-legal-links { display: grid; gap: var(--space-2); }
.documents-page .documents-legal-links a { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; }
.documents-legal-links a:hover { border-color: var(--orange); }
.documents-legal-links a:hover strong { color: var(--orange-link); }
.documents-legal-links span { font-size: var(--font-small); color: var(--text-muted); }
.documents-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.document-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-items: start; min-width: 0; overflow: hidden; padding: var(--space-4); }
.documents-grid > .document-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.document-preview { grid-row: 1; position: relative; display: block; width: 100%; min-width: 0; height: var(--document-preview-height); padding: 0; margin: 0; overflow: hidden; cursor: zoom-in; }
.document-preview:hover { border-color: var(--steel-hover); }
.document-preview img { position: absolute; top: var(--space-3); left: var(--space-3); display: block; width: calc(100% - 2 * var(--space-3)); height: calc(100% - 2 * var(--space-3)); object-fit: contain; }
.document-page-count { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--font-caption); line-height: var(--line-normal); }
.document-card h3 { grid-row: 2; margin: 0; font-size: var(--font-banner-title); line-height: var(--line-normal); }
.document-summary { grid-row: 3; display: grid; gap: var(--space-3); }
.document-card p { margin: 0; font-size: var(--font-small); }
.document-card .document-detail { grid-row: 4; color: var(--text-muted); font-size: var(--font-caption); }
.document-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--font-small); line-height: var(--line-normal); }
.document-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); }
.document-facts dt { color: var(--text-muted); }
.document-facts dd { margin: 0; overflow-wrap: anywhere; }
.document-actions { grid-row: 5; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 0; padding-top: var(--space-2); }
.documents-page .document-actions a { text-decoration: none; }
.document-viewer { width: min(1152px, calc(100% - 2 * var(--page-gutter))); height: min(92dvh, 1100px); max-height: calc(100dvh - 2 * var(--space-4)); }
.document-viewer-header { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border); background: var(--white); }
.document-viewer h2 { flex: 1; margin: 0; font-size: var(--font-body); line-height: var(--line-normal); }
.document-viewer-header .ui-button { flex: none; }
.document-viewer-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: var(--border); }
.document-viewer-pagination { display: flex; align-items: center; gap: var(--space-2); }
.document-viewer-pagination .ui-button { min-width: 36px; }
.document-viewer-counter { min-width: 120px; text-align: center; font-size: var(--font-small); font-variant-numeric: tabular-nums; }
.document-viewer-jump { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-caption); color: var(--text-muted); }
.document-viewer-jump select { min-width: 56px; padding: var(--space-1) var(--space-2); border: var(--border); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; font-size: var(--font-small); }
.document-viewer-zoom { margin-left: auto; }
.document-viewer .ui-button:disabled { opacity: .45; cursor: default; }
.document-viewer-stage { position: relative; flex: 1; min-height: 0; padding: var(--space-4); overflow: auto; overscroll-behavior: contain; background: var(--surface-card); scrollbar-gutter: stable; }
.document-viewer-page { display: flex; align-items: center; justify-content: center; height: 100%; }
.document-viewer-page img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 2px 16px #253b4e1a; background: var(--white); }
.document-viewer-stage.is-zoomed .document-viewer-page { display: block; width: max-content; min-width: 100%; height: auto; min-height: 100%; }
.document-viewer-stage.is-zoomed img { max-width: none; max-height: none; margin-inline: auto; }
.document-viewer-status { position: absolute; inset: var(--space-4); display: grid; place-content: center; margin: 0; text-align: center; color: var(--text-muted); font-size: var(--font-small); }
.document-viewer-actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border); }
.document-viewer-actions a { text-decoration: none; }
@media (max-width: 600px) {
  .document-viewer { width: calc(100% - 2 * var(--space-2)); height: calc(100dvh - 2 * var(--space-2)); max-height: calc(100dvh - 2 * var(--space-2)); }
  .document-viewer-header, .document-viewer-toolbar, .document-viewer-actions { padding-inline: var(--space-3); }
  .document-viewer-jump { order: 3; flex-basis: 100%; }
  .document-viewer-stage { padding: var(--space-2); }
}
@container documents (max-width: 500px) {
  .documents-grid { grid-template-columns: minmax(0, 1fr); }
  .document-card { display: flex; flex-direction: column; gap: var(--space-3); }
  .document-preview { flex: 0 0 var(--document-preview-height); }
}
@container documents (max-width: 380px) { .document-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }