/* DevTools Markdown
 * Scoped styling for rendered markdown blocks under `.md-body`.
 * Keep it global, but avoid impacting non-markdown content.
 */

.md-body :where(code, pre, samp, kbd) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.md-body :where(code) {
  font-size: 0.92em;
}

.md-body {
  color: inherit;
}

.md-body :where(h1, h2, h3, h4, h5, h6) {
  margin: 1.5rem 0 0.75rem 0;
  line-height: 1.2;
}

.md-body :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child) {
  margin-top: 0;
}

.md-body :where(p, ul, ol, blockquote, pre, table) {
  margin: 0 0 1rem 0;
}

.md-body :where(ul, ol) {
  padding-inline-start: 1.25rem;
}

.md-body :where(li) {
  margin: 0.25rem 0;
}

.md-body :where(a) {
  color: var(--matrix-color-b, var(--bs-primary));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.md-body :where(a:hover, a:focus) {
  text-decoration-thickness: 3px;
}

.md-body :where(code):not(pre code) {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  padding: 0.08em 0.35em;
}

.dark-style .md-body :where(code):not(pre code) {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.18);
}

.md-body :where(blockquote) {
  padding: 0.85rem 1rem;
  border-left: 4px solid color-mix(in srgb, var(--matrix-color-b, #38bdf8) 60%, rgba(15, 23, 42, 0.16));
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
}

.dark-style .md-body :where(blockquote) {
  background: rgba(148, 163, 184, 0.08);
}

.md-body :where(blockquote > :last-child) {
  margin-bottom: 0;
}

.md-body :where(hr) {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  margin: 1.5rem 0;
}

.dark-style .md-body :where(hr) {
  border-top-color: rgba(148, 163, 184, 0.20);
}

.md-body :where(table) {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  overflow: hidden;
}

.dark-style .md-body :where(table) {
  border-color: rgba(148, 163, 184, 0.14);
}

.md-body :where(th, td) {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  vertical-align: top;
}

.dark-style .md-body :where(th, td) {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

.md-body :where(th) {
  text-align: left;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.04);
}

.dark-style .md-body :where(th) {
  background: rgba(2, 8, 23, 0.30);
}

.md-body :where(tbody tr:nth-child(2n)) {
  background: rgba(15, 23, 42, 0.02);
}

.dark-style .md-body :where(tbody tr:nth-child(2n)) {
  background: rgba(148, 163, 184, 0.05);
}

.md-body :where(pre) {
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.92);
  overflow: auto;
}

.dark-style .md-body :where(pre) {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(2, 8, 23, 0.35);
}

/* highlight.js theme files often set a light background; keep ours controlled by `pre` above. */
.md-body :where(.hljs) {
  background: transparent !important;
}

.md-body :where(pre code.hljs) {
  padding: 0 !important;
}

/* Dark-mode token overrides so "light" highlight themes remain readable. */
.dark-style .md-body :where(.hljs) {
  color: #e2e8f0 !important;
}

.dark-style .md-body :where(.hljs-comment, .hljs-quote) {
  color: rgba(226, 232, 240, 0.62) !important;
  font-style: italic;
}

.dark-style .md-body :where(.hljs-doctag, .hljs-keyword, .hljs-formula) {
  color: color-mix(in srgb, var(--matrix-color-b, #38bdf8) 70%, #c084fc) !important;
}

.dark-style .md-body :where(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string) {
  color: color-mix(in srgb, var(--matrix-color-a, #22c55e) 70%, #22c55e) !important;
}

.dark-style .md-body :where(.hljs-number, .hljs-literal) {
  color: #fbbf24 !important;
}

.dark-style .md-body :where(.hljs-title, .hljs-section, .hljs-name, .hljs-selector-tag) {
  color: color-mix(in srgb, var(--matrix-color-b, #38bdf8) 85%, #e2e8f0) !important;
}

.dark-style .md-body :where(.hljs-built_in, .hljs-type, .hljs-class .hljs-title) {
  color: #fb7185 !important;
}

.md-body :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
}

.dark-style .md-body :where(img) {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(2, 8, 23, 0.12);
}

/* Utility: used throughout templates to prevent flex children from overflowing their container. */
.min-width-0 {
  min-width: 0 !important;
}