.documents-page {
    overflow: auto;
    padding: 22px clamp(16px, 4vw, 42px) 48px;
}

.documents-shell { width: min(880px, 100%); margin: 0 auto; }
.documents-head { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.documents-head h1 { margin: 0; font-size: clamp(24px, 5vw, 34px); }
.documents-back {
    min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
    color: var(--accent); background: transparent; font: inherit;
}
.documents-back:hover, .documents-back:focus-visible { background: var(--card-hi); }
.documents-status { min-height: 24px; margin: 14px 0; color: var(--dim); }
.documents-status[data-state="error"] {
    padding: 12px; border: 1px solid var(--bad);
    border-radius: 10px; color: #d9897d; background: rgba(163, 86, 74, .08);
    overflow-wrap: anywhere;
}
.documents-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.document-row {
    width: 100%; min-height: 58px; display: grid; gap: 5px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
    background: var(--card); text-align: left; font: inherit;
}
.document-row:hover, .document-row:focus-visible { border-color: var(--accent); background: var(--card-hi); }
.document-row strong { overflow-wrap: anywhere; }
.document-row span, .document-meta { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; }
.document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.document-heading h2 { margin: 0 0 6px; overflow-wrap: anywhere; }
.document-meta { margin: 0; }
.document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.document-actions button {
    min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink); background: var(--card); font: inherit;
}
.document-actions button:disabled { opacity: .45; }
.document-body {
    margin-top: 20px; padding: clamp(16px, 4vw, 28px); border: 1px solid var(--line);
    border-radius: 14px; background: var(--card); line-height: 1.55; overflow-wrap: anywhere;
}
.document-body pre { max-width: 100%; overflow: auto; }
.document-body img { max-width: 100%; }
.document-body h3, .document-body h4, .document-body h5, .document-body h6 {
    margin: 1.4em 0 .55em; color: var(--ink);
}
.document-body p, .document-body ul, .document-body ol { margin: .75em 0; }
.document-body pre.code {
    padding: 13px; border: 1px solid var(--line); border-radius: 10px;
    background: #101014; font: 12px/1.55 var(--mono); white-space: pre;
}
.document-body blockquote { margin: 1em 0; padding-left: 14px; border-left: 2px solid var(--accent-ed); color: var(--dim); }
.document-body .tablewrap { max-width: 100%; overflow-x: auto; }
.document-body table { border-collapse: collapse; min-width: 100%; }
.document-body th, .document-body td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
.document-body .codeblock { position: relative; }
.document-body .codecopy { display: none; }

@media (max-width: 560px) {
    .documents-page { padding-top: 12px; }
    .document-heading { display: block; }
    .document-actions { justify-content: stretch; margin-top: 14px; }
    .document-actions button { flex: 1; }
}