/* Стили Markdown в .prose — в соответствии с основным дизайном сайта (main.css) */

.prose {
  color: #333;
  font-size: 1rem;
  line-height: 1.8;
}

.dark .prose {
  color: #e5e5e5;
}

.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { margin: 1.05em 0; }

.prose ul, .prose ol { margin: 1.05em 0; padding-left: 2rem !important; }
.prose ul { list-style-type: disc !important; list-style-position: outside; }
.prose ol { list-style-type: decimal !important; list-style-position: outside; }
.prose ul ul { list-style-type: circle !important; padding-left: 1.5rem !important; }
.prose ol ol { list-style-type: lower-alpha !important; padding-left: 1.5rem !important; }
.prose li { margin: 0.35em 0; display: list-item !important; }
.prose li > p { margin: 0.5em 0; }

.prose hr { margin: 2em 0; border: 0; border-top: 1px solid #ddd; }
.dark .prose hr { border-top-color: #404040; }

/* Заголовки */
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: #333;
  font-weight: 650;
  line-height: 1.25;
  scroll-margin-top: 7rem;
}
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4 { color: #fff; }

.prose h1 { font-size: 1.9rem; margin: 0 0 0.9rem; }
.prose h2 { font-size: 1.45rem; margin: 2.2rem 0 0.9rem; padding-bottom: 0.35rem; border-bottom: 1px solid #ddd; }
.dark .prose h2 { border-bottom-color: #404040; }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 0.65rem; }
.prose h4 { font-size: 1rem; margin: 1.25rem 0 0.55rem; }

/* Ссылки — как в main.css */
.prose a {
  color: #2196f3;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { opacity: 0.9; }
.dark .prose a { color: #64b5f6; }

/* Цитата */
.prose blockquote {
  margin: 1.35em 0;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border-left: 4px solid #2196f3;
  background: #f5f5f5;
  color: #666;
}
.dark .prose blockquote { background: #2a2a2a; border-left-color: #64b5f6; color: #ccc; }
.prose blockquote > *:first-child { margin-top: 0; }
.prose blockquote > *:last-child { margin-bottom: 0; }
.prose blockquote p { margin: 0.4em 0; }

/* Код инлайн */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  background: #f0f0f0;
  border: 1px solid #ddd;
  color: #333;
  padding: 0.15em 0.35em;
  border-radius: 4px;
}
.dark .prose code { background: #333; border-color: #555; color: #e5e5e5; }

/* Блок кода — тёмный как в IDE */
.prose .code-block {
  margin: 1.25em 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #2d2d2d;
}
.dark .prose .code-block { border-color: #404040; }
.prose .code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.75rem;
  min-height: 28px;
  font-size: 0.75rem;
  color: #999;
  background: #252525;
  border-bottom: 1px solid #404040;
}
.prose .code-block__lang { font-family: ui-monospace, monospace; text-transform: uppercase; font-weight: 600; }
.prose .code-block__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1rem;
  color: #999;
  background: transparent;
  border: 1px solid #404040;
  border-radius: 4px;
  cursor: pointer;
}
.prose .code-block__copy:hover { opacity: 0.9; }
.prose .code-block pre {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-x: auto;
  background: #2d2d2d !important;
  color: #d4d4d4;
  border: 0;
}
.prose pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit;
}

/* highlight.js (github-dark): токены внутри блока; фон задаёт .code-block / pre */
.prose .code-block pre code.hljs {
  color: #c9d1d9;
}
.prose p code.hljs {
  font-size: 0.9em;
  background: #2d333b !important;
  border-color: #444c56 !important;
  color: #c9d1d9;
}
.dark .prose p code.hljs {
  background: #22272e !important;
  border-color: #373e47 !important;
}

/* Таблицы */
.prose .table-wrapper {
  margin: 1.35em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #ddd;
  max-width: 100%;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prose .table-wrapper::-webkit-scrollbar { display: none; }
.prose .table-wrapper.dragging { cursor: grabbing; user-select: none; }
.dark .prose .table-wrapper { border-color: #404040; }

.prose table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  font-size: 0.9rem;
}
.dark .prose table { background: #252525; }
.prose .table-wrapper.table-wide table { min-width: 900px; }
@media (min-width: 1024px) {
  .prose .table-wrapper.table-wide table { min-width: 1100px; }
}

.prose th, .prose td {
  padding: 0.6rem 0.85rem;
  border: 1px solid #ddd;
  vertical-align: top;
  text-align: left;
  color: #333;
}
.dark .prose th, .dark .prose td { border-color: #404040; color: #e5e5e5; }
.prose th {
  font-weight: 600;
  background: #f5f5f5;
  color: #333;
}
.dark .prose th { background: #333; color: #e5e5e5; }
.prose table.table-zebra tbody tr:nth-child(even) { background: #f5f5f5; }
.dark .prose table.table-zebra tbody tr:nth-child(even) { background: rgba(255,255,255,0.05); }
.prose table.table-zebra tbody tr:nth-child(odd) { background: transparent; }

/* Картинки */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.35em 0;
  border: 1px solid #ddd;
}
.dark .prose img { border-color: #404040; }

/* Чек-листы */
.prose .task-list { list-style: none !important; padding-left: 0 !important; }
.prose .task-list li { display: flex; align-items: flex-start; gap: 0.75rem; list-style: none !important; margin: 0.4em 0; }
.prose .task-list li input[type="checkbox"] {
  margin: 0.25rem 0 0 0;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  cursor: default;
}
.prose .task-list li input[type="checkbox"]:not(:checked) { accent-color: #999; }
.prose .task-list li input[type="checkbox"]:checked { accent-color: #2196f3; }
.dark .prose .task-list li input[type="checkbox"]:checked { accent-color: #64b5f6; }
.prose .task-list li .task-label { flex: 1; }
.prose .task-list li.task-done .task-label { color: #666; text-decoration: line-through; }
.dark .prose .task-list li.task-done .task-label { color: #999; }

/* Плашки (callouts) */
.prose .callout,
.prose div.callout {
  margin: 1.25em 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 0.95rem;
  line-height: 1.6;
}
.prose .callout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; }
.prose .callout .callout-icon { flex-shrink: 0; font-size: 1.25rem; margin-top: 0.1rem; }
.prose .callout .callout-body { flex: 1; min-width: 0; }
.prose .callout-note,
.prose div.callout-note { background: #e3f2fd; border-color: #2196f3; color: #1565c0; }
.prose .callout-note .callout-icon { color: #2196f3; }
.prose .callout-tip,
.prose div.callout-tip { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.prose .callout-tip .callout-icon { color: #4caf50; }
.prose .callout-warn,
.prose div.callout-warn { background: #fff3e0; border-color: #ff9800; color: #e65100; }
.prose .callout-warn .callout-icon { color: #ff9800; }
.prose .callout-danger,
.prose div.callout-danger { background: #ffebee; border-color: #f44336; color: #c62828; }
.prose .callout-danger .callout-icon { color: #f44336; }
.dark .prose .callout-note, .dark .prose div.callout-note { background: #1a237e; border-color: #64b5f6; color: #90caf9; }
.dark .prose .callout-tip, .dark .prose div.callout-tip { background: #1b5e20; border-color: #81c784; color: #a5d6a7; }
.dark .prose .callout-warn, .dark .prose div.callout-warn { background: #e65100; border-color: #ffb74d; color: #ffe0b2; }
.dark .prose .callout-danger, .dark .prose div.callout-danger { background: #b71c1c; border-color: #e57373; color: #ffcdd2; }

/* Спойлер (details/summary) */
.prose details,
.prose div details {
  margin: 1em 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  overflow: hidden;
}
.dark .prose details, .dark .prose div details { border-color: #404040; background: #2a2a2a; }
.prose summary,
.prose details summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: #eee;
  color: #333;
  list-style: none;
  transition: background 0.2s ease;
}
.dark .prose summary, .dark .prose details summary { background: #333; color: #e5e5e5; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary .details-caret { flex-shrink: 0; font-size: 1rem; transition: transform 0.25s ease; }
.prose details[open] summary .details-caret { transform: rotate(90deg); }
.prose details[open] summary { border-bottom: 1px solid #ddd; }
.dark .prose details[open] summary { border-bottom-color: #404040; }
.prose .details-inner {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: #333;
}
.dark .prose .details-inner { color: #e5e5e5; }
.prose details:not([open]) .details-inner { max-height: 0 !important; }
.prose details .details-inner,
.prose details .details-inner > * { padding: 0 0.65rem 0.65rem; }
.prose details .details-inner > *:first-child { padding-top: 0.5rem; }

/* --- Дерево навигации знаний (десктопный aside + мобильный drawer) --- */
.nav-tree {
  --nav-tree-line: #d1d5db;
  --nav-tree-pad: 0.5rem;
  --nav-tree-limb: 0.4375rem;
  /* = Tailwind space-y-0.5 (margin-top 0.125rem), иначе стык с «ломаной» линией */
  --nav-tree-bridge: 0.125rem;
  --nav-tree-radius: 7px;
}
.dark .nav-tree {
  --nav-tree-line: #52525b;
}

.nav-tree-branch {
  position: relative;
  margin-left: 0.25rem;
  padding-left: var(--nav-tree-pad);
}

/* Мобильное меню: те же отступы, что и в aside (раньше другие px давали «съезд» линий) */
.nav-tree-branch--mobile {
  --nav-tree-pad: 0.5rem;
  --nav-tree-limb: 0.4375rem;
  margin-left: 0.25rem;
}

.nav-tree.sidebar-nav-mobile {
  --nav-tree-pad: 0.5rem;
  --nav-tree-limb: 0.4375rem;
  --nav-tree-bridge: 0.125rem;
}

.nav-tree-branch > .min-w-0,
.nav-tree-branch > details,
.nav-tree-branch > .nav-tree-branch {
  position: relative;
  z-index: 0;
}

/* Вертикаль ствола: до низа строки + мост к следующему пункту (в т.ч. вложенная ветка → статьи раздела) */
.nav-tree-branch > .min-w-0:not(:last-child)::after,
.nav-tree-branch > details:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 0;
  bottom: calc(-1 * var(--nav-tree-bridge));
  width: 1px;
  background: var(--nav-tree-line);
  pointer-events: none;
}

/* Вложенный блок ветки перед статьёй: чуть длиннее ствол, без щели на стыке с «└» */
.nav-tree-branch > .nav-tree-branch:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 0;
  bottom: calc(-1 * var(--nav-tree-bridge) - 1px);
  width: 1px;
  background: var(--nav-tree-line);
  pointer-events: none;
}

.nav-tree-branch > *:not(:first-child):not(:last-child)::after {
  top: calc(-1 * var(--nav-tree-bridge));
}

/* Вложенное дерево: первый пункт соединяется с блоком выше (mt у внутренней ветки) */
.nav-tree-branch .nav-tree-branch > *:first-child:not(:last-child)::after {
  top: calc(-1 * var(--nav-tree-bridge));
}

/* Горизонталь «├» у промежуточных пунктов */
.nav-tree-branch > .min-w-0:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 50%;
  width: var(--nav-tree-limb);
  transform: translateY(-50%);
  border-top: 1px solid var(--nav-tree-line);
  pointer-events: none;
}

.nav-tree-branch > details:not(:last-child) > summary::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 50%;
  width: var(--nav-tree-limb);
  transform: translateY(-50%);
  border-top: 1px solid var(--nav-tree-line);
  pointer-events: none;
}

/* Последний пункт-ссылка: закруглённое «└» */
.nav-tree-branch > .min-w-0:last-child::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 0;
  width: var(--nav-tree-limb);
  height: 50%;
  border-left: 1px solid var(--nav-tree-line);
  border-bottom: 1px solid var(--nav-tree-line);
  border-bottom-left-radius: var(--nav-tree-radius);
  box-sizing: border-box;
  pointer-events: none;
}

/* Стык с предшествующим «├» (мост space-y) */
.nav-tree-branch > .min-w-0:last-child:not(:first-child)::before {
  top: calc(-1 * var(--nav-tree-bridge));
  height: calc(50% + var(--nav-tree-bridge));
}

.nav-tree-branch > .nav-tree-branch:not(:last-child) + .min-w-0:last-child::before {
  top: calc(-1 * var(--nav-tree-bridge) - 0.5px);
  height: calc(50% + var(--nav-tree-bridge) + 0.5px);
}

.nav-tree-branch > details:last-child > summary::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--nav-tree-pad));
  top: 0;
  width: var(--nav-tree-limb);
  height: 50%;
  border-left: 1px solid var(--nav-tree-line);
  border-bottom: 1px solid var(--nav-tree-line);
  border-bottom-left-radius: var(--nav-tree-radius);
  box-sizing: border-box;
  pointer-events: none;
}

.nav-tree-branch > details:last-child:not(:first-child) > summary::before {
  top: calc(-1 * var(--nav-tree-bridge));
  height: calc(50% + var(--nav-tree-bridge));
}