/**
 * Document page (single-document.php — /documents/{slug}/). Built from the documentation route's
 * tokens: kicker + Barlow title, mono meta, panel cards, the brass primary button.
 *
 *   .document                 section wrapper (padding from .section)
 *   .document__desc           staff summary under the title, 15px/1.6 #4a5058, max 720px
 *   .document__meta           stats strip reused as a <dl> (labels mono 11px, values 18px display)
 *   .document__actions        Download button + "Open in a new tab" link, 24px above the viewer
 *   .document__viewer         bordered panel holding the <object>; 75vh tall, min 480px, max 1100px
 *   .document__fallback       the card shown where the file cannot be embedded (phones)
 *   .document__used           "Used with" list: panel rows, name 15px 600 + mono kind on the right
 *   .document-cols            two-col: related items left, dark CTA + related documents right
 */

.document { padding-top: 24px; }
.document-breadcrumb { padding: 20px var(--gutter) 0; }
.document__head { max-width: 1100px; }
.document__title { margin-bottom: 18px; }
.document__desc { margin: 0 0 20px; max-width: 720px; color: var(--text-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.document__desc p { margin: 0 0 12px; }
.document__desc p:last-child { margin-bottom: 0; }
.document__meta { margin: 0 0 24px; }
.document__meta dt, .document__meta dd { margin: 0; }
.document__meta-value { font-size: 18px; line-height: 1.2; text-wrap: pretty; }

.document__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 16px; }
.document__download { font-size: 15px; }
.document__open { font: 600 13px var(--font-body); color: var(--orange-text); }
.document__open:hover { text-decoration: underline; }

.document__viewer { border: 1px solid var(--line); background: var(--panel); margin: 0 0 40px; }
.document__object { display: block; width: 100%; height: clamp(480px, 75vh, 1100px); }
.document__fallback { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 24px; }
.document__fallback-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; max-width: 560px; }
.document__fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.document__fallback--mobile { margin: 0 0 32px; }
.document__fallback--mobile[hidden] { display: none; }

.document__missing { padding: 24px; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.document__missing-title { margin: 0; }
.document__missing-text { margin: 0; color: var(--text-2); font-size: 14px; max-width: 560px; }

.document-cols { margin-top: 8px; }
.document__h { margin: 0 0 14px; }
.document__used-list { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--line); background: var(--panel); }
.document__used-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.document__used-item:last-child { border-bottom: 0; }
.document__used-link { font-weight: 600; font-size: 15px; }
.document__used-kind { white-space: nowrap; }
.document__back { margin: 8px 0 0; font-size: 14px; }
.document__back .text-link { font-weight: 600; color: var(--orange-text); }
.document__back .text-link:hover { text-decoration: underline; }
.document-related .doc-list__row--page { cursor: pointer; }

@media (max-width: 900px) {
	.document__object { height: clamp(360px, 60vh, 800px); }
	.document__meta-value { font-size: 16px; }
}
@media (max-width: 600px) {
	.document__actions { gap: 10px 16px; }
	.document__download, .document__open, .document__fallback .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media print {
	.document__viewer, .document__actions, .document-cols .aside { display: none; }
}