/* ─── Documentation (/docs) and rendered Markdown (.md-body) ─────────────────
   Loaded by the shell after app.css. Only theme variables: both themes work
   without overrides. Prefixes: .doc- (pages), .md- (Markdown output, also used
   by the AI-access preview).                                                  */

/* ── Rendered Markdown ───────────────────────────────────── */
.md-body { color: var(--color-text); line-height: 1.7; overflow-wrap: anywhere; }
.md-body > :first-child { margin-top: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
    margin:         var(--space-6) 0 var(--space-3);
    line-height:    1.3;
    letter-spacing: var(--letter-spacing-tight);
    scroll-margin-top: calc(var(--app-topbar-h) + var(--space-4));
}
.md-body h1 { font-size: var(--font-size-2xl); }
.md-body h2 { font-size: var(--font-size-xl); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.md-body h3 { font-size: var(--font-size-lg); }
.md-body h4, .md-body h5, .md-body h6 { font-size: var(--font-size-base); }
.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body pre, .md-body .md-table { margin: 0 0 var(--space-4); }
.md-body ul, .md-body ol { padding-left: var(--space-6); }
.md-body ul { list-style: disc; }
.md-body ul ul { list-style: circle; }
.md-body ol { list-style: decimal; }
.md-body li { margin-bottom: var(--space-1); }
.md-body li > ul, .md-body li > ol { margin: var(--space-1) 0 0; }
.md-body li.task { list-style: none; margin-left: calc(-1 * var(--space-5)); }
.md-body li.task input { margin-right: var(--space-2); vertical-align: middle; }
.md-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.md-body code {
    padding:          1px 5px;
    border-radius:    var(--radius);
    background-color: var(--color-bg-muted);
    border:           1px solid var(--color-border);
    font-family:      var(--font-family-mono);
    font-size:        0.9em;
}
.md-body pre {
    padding:          var(--space-4);
    overflow-x:       auto;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
    line-height:      1.5;
}
.md-body pre code { padding: 0; border: 0; background: none; font-size: var(--font-size-sm); white-space: pre; }
.md-body blockquote {
    padding:     var(--space-2) var(--space-4);
    border-left: 3px solid var(--color-primary-light);
    color:       var(--color-text-muted);
}
.md-body blockquote > :last-child { margin-bottom: 0; }
.md-body hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--color-border); }
.md-body del { color: var(--color-text-muted); }
.md-table { overflow-x: auto; }
.md-table table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.md-table th, .md-table td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.md-table tr:last-child td { border-bottom: 1px solid var(--color-border); }
.md-table th { background-color: var(--color-table-header-bg); color: var(--color-table-header-text); font-weight: var(--font-weight-semibold); }
.md-table .md-center { text-align: center; }
.md-table .md-right  { text-align: right; }

/* ── /docs/ home and index ───────────────────────────────── */
.doc-group { margin-bottom: var(--space-5); }
.doc-targets { margin: 0; padding: 0; list-style: none; }
.doc-targets__item { border-bottom: 1px solid var(--color-border); }
.doc-targets__item:last-child { border-bottom: none; }
.doc-targets__link {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-3) var(--space-5);
    color:       var(--color-text);
}
.doc-targets__link:hover { background-color: var(--app-hover-bg); }
.doc-targets__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.doc-badge--empty { opacity: 0.6; }

.doc-list {
    display:       grid;
    gap:           var(--space-2);
    margin:        0 0 var(--space-6);
    padding:       0;
    list-style:    none;
}
.doc-list__link {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    padding:          var(--space-4) var(--space-5);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    color:            var(--color-text);
    transition:       border-color var(--transition);
}
.doc-list__link:hover { border-color: var(--color-primary-light); }
.doc-list__icon { color: var(--color-primary); font-size: 22px; flex: none; }
.doc-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-list__title { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.doc-list__meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.doc-suggest__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.doc-suggest__form { margin: 0; }

/* ── One page: pages | article | table of contents ───────── */
.doc-layout {
    display:               grid;
    grid-template-columns: 220px minmax(0, 1fr) 200px;
    gap:                   var(--space-5);
    align-items:           start;
}
.doc-layout:not(:has(.doc-toc)) { grid-template-columns: 220px minmax(0, 1fr); }
.doc-side, .doc-toc { position: sticky; top: calc(var(--app-topbar-h) + var(--space-4)); font-size: var(--font-size-sm); }
.doc-side__target {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    margin-bottom: var(--space-3);
    color:         var(--color-text);
    font-weight:   var(--font-weight-semibold);
    overflow-wrap: anywhere;
}
.doc-side__list, .doc-toc__list { margin: 0; padding: 0; list-style: none; }
.doc-side__link {
    display:       block;
    padding:       var(--space-1) var(--space-3);
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    overflow-wrap: anywhere;
}
.doc-side__link:hover { background-color: var(--app-hover-bg); color: var(--color-text); }
.doc-side__link.is-active { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); font-weight: var(--font-weight-medium); }
.doc-article { margin-bottom: 0; min-width: 0; }
.doc-article__head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.doc-article__title { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.doc-article__meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.doc-toc__title {
    margin:         0 0 var(--space-2);
    color:          var(--color-text-muted);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.doc-toc__item a { display: block; padding: 2px 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
.doc-toc__item a:hover { color: var(--color-primary); }
.doc-toc__item--3 { padding-left: var(--space-3); }

/* ── Editor ──────────────────────────────────────────────── */
.doc-mono { font-family: var(--font-family-mono); }
/* elitma.css zeroes the margin of the last .form-group of its type: spacing is set here. */
.doc-editor .form-group,
.doc-editor .form-group:last-of-type { margin-bottom: var(--space-4); }
.doc-editor__meta {
    display:               grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px;
    gap:                   var(--space-4);
}
.doc-editor__panes {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:                   var(--space-4);
}
.doc-editor__text { width: 100%; min-height: 420px; font-size: var(--font-size-sm); line-height: 1.55; resize: vertical; }
.doc-editor__preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.doc-editor__label { color: var(--color-label); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.doc-editor__preview {
    min-height:       420px;
    max-height:       720px;
    overflow:         auto;
    padding:          var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-muted);
}
.doc-editor__actions { display: flex; justify-content: flex-end; gap: var(--space-3); }
.doc-delete { margin-top: var(--space-4); }
.doc-danger { color: var(--color-error); }

/* ── Small screens ───────────────────────────────────────── */
@media (max-width: 1100px) {
    .doc-layout, .doc-layout:not(:has(.doc-toc)) { grid-template-columns: 200px minmax(0, 1fr); }
    .doc-toc { display: none; }
}
@media (max-width: 800px) {
    .doc-layout, .doc-layout:not(:has(.doc-toc)) { grid-template-columns: minmax(0, 1fr); }
    .doc-side { position: static; }
    .doc-editor__meta, .doc-editor__panes { grid-template-columns: minmax(0, 1fr); }
    .doc-editor__preview { min-height: 200px; }
}