/* SPDX-License-Identifier: AGPL-3.0-only
   Docs module styles. Scoped under .docs so the host stylesheet stays in charge
   of everything else (buttons, alerts, header). */
/* Host centres `main .container:not(...)`; outrank it. */
main .container.docs { text-align: left; }
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; margin: 24px 0 48px; }
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } .docs-side { order: 2; } }

.docs-side { position: sticky; top: 16px; font-size: 14px; }
@media (max-width: 860px) { .docs-side { position: static; } }
.docs-search input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; }
.docs-side__home { margin: 12px 0 4px; font-weight: 600; }
.docs-side__admin { margin-top: 16px; padding-top: 10px; border-top: 1px solid #eee; }
.docs-tree__topic { margin: 14px 0 4px; font-weight: 700; color: #555; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.docs-tree ul { list-style: none; margin: 0; padding: 0; }
.docs-tree li { margin: 3px 0; line-height: 1.35; }
.docs-tree li.is-current > a { font-weight: 700; }

.docs-main { min-width: 0; }
.docs-lead { color: #555; font-size: 16px; }
.docs-muted { color: #888; }
.docs-hint { color: #777; font-size: 13px; margin: 6px 0 14px; }
.docs-note { background: #fff8e1; border-left: 4px solid #f0b400; padding: 8px 12px; margin: 10px 0; }
.docs-crumbs { font-size: 13px; color: #777; margin-bottom: 6px; }

.docs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.docs-head h1 { margin: 0; }
.docs-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.docs-badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #dc3545; color: #fff; vertical-align: middle; }
.docs-badge--muted { background: #e6e6e6; color: #555; }
.docs .button.docs-btn-small { padding: 6px 12px; font-size: 13px; min-width: 0; margin: 0; }
.docs .button.docs-btn-ghost { background: transparent; color: inherit; border: 1px solid #bbb; }
.docs .button.docs-btn-danger { background: #dc3545; }

.docs-content { line-height: 1.65; font-size: 16px; margin-top: 18px; overflow-wrap: anywhere; }
.docs-content img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 12px 0; }
.docs-content table { border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
.docs-content th, .docs-content td { border: 1px solid #ddd; padding: 6px 10px; }
.docs-content pre { background: #f6f6f6; padding: 10px; overflow-x: auto; border-radius: 4px; }
.docs-content blockquote { border-left: 4px solid #6c9a3c; margin: 12px 0; padding: 4px 14px; color: #444; background: #f5f9f0; }
.docs-content--boxed { border: 1px dashed #ccc; padding: 12px 16px; }

.docs-children { margin-top: 28px; padding-top: 12px; border-top: 1px solid #eee; }
.docs-meta { margin-top: 32px; font-size: 13px; color: #777; }
.docs-admin-box { margin-top: 18px; font-size: 14px; }
.docs-admin-box form { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }

.docs-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 18px; }
.docs-topic { border: 1px solid #e3e3e3; border-radius: 8px; padding: 16px 18px; }
.docs-topic h2 { margin-top: 0; font-size: 20px; }
.docs-topic__list { list-style: none; padding: 0; margin: 0 0 12px; }
.docs-topic__list li { margin: 5px 0; }

.docs-results { list-style: none; padding: 0; }
.docs-results li { margin: 0 0 16px; }
.docs-results p { margin: 4px 0 0; color: #555; font-size: 14px; }

.docs-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.docs-form input[type=text], .docs-form select, .docs-form input[type=number] { width: 100%; box-sizing: border-box; padding: 8px; font-weight: 400; }
.docs-form .docs-check { font-weight: 400; }
.docs-form .docs-check input { width: auto; }
.docs-settings { margin: 16px 0; padding: 10px 14px; border: 1px solid #e3e3e3; border-radius: 6px; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.docs-form__buttons { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.docs-tabs { margin: 4px 0 12px; }
.docs-visibility { border: 1px solid #e3e3e3; border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
.docs-visibility legend { font-weight: 600; padding: 0 4px; }
.docs-roles { margin: 6px 0 0 24px; padding-left: 10px; border-left: 3px solid #e6efe0; }
.docs-badge--role { background: #6c9a3c; }
.docs .EasyMDEContainer .editor-preview img, .docs .EasyMDEContainer .editor-preview-side img { max-width: 100%; }

.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.docs-table th, .docs-table td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; vertical-align: middle; }
.docs-matrix td:not(:first-child), .docs-matrix th:not(:first-child) { text-align: center; }
.docs-filter { padding: 6px 10px; width: 260px; max-width: 100%; }
.docs-inline { display: flex; gap: 10px; align-items: center; margin: 6px 0; }

.docs-diff2 { border: 1px solid #e3e3e3; border-radius: 6px; font-size: 14px; line-height: 1.5; margin: 8px 0; overflow-x: auto; }
.docs-diff2__row { padding: 2px 10px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.5em; }
.docs-diff2__row--same { color: #666; }
.docs-diff2__row--gap { color: #aaa; text-align: center; background: #fafafa; }
.docs-diff2__row--add { background: #eaffea; }
.docs-diff2__row--del { background: #ffecec; }
.docs-diff2__row--change { background: #fffbe6; }
.docs del, .docs-hint del { background: #ffd7d5; color: #82071e; text-decoration: line-through; }
.docs ins, .docs-hint ins { background: #ccffd8; color: #055d20; text-decoration: none; }
.docs-diff-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 14px 0 4px; }
.docs-diff-switch { margin-left: auto; font-size: 13px; }
.docs-stat { font-family: monospace; font-size: 13px; }
.docs-stat--add { color: #1a7f37; }
.docs-stat--del { color: #cf222e; }
.docs-row--minor td { color: #888; }
.docs-sync { list-style: none; padding: 0; margin: 8px 0 16px; }
.docs-sync--ok { color: #1a7f37; }
.docs-sync--bad { color: #b35900; font-weight: 600; }
.docs-sync-panel { background: #fff8e1; border-left: 4px solid #f0b400; padding: 8px 12px; margin: 10px 0; }
.docs-sync-panel summary { font-weight: 600; cursor: pointer; }
.docs-sync-list { margin: 6px 0; font-size: 13px; }
.docs-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; }
.docs-diff pre { background: #fafafa; padding: 10px; font-size: 13px; overflow-x: auto; white-space: pre-wrap; }
.docs-diff .add { background: #e6ffed; display: inline-block; width: 100%; }
.docs-diff .del { background: #ffeef0; display: inline-block; width: 100%; }