/* Lumeo.FileViewer — markdown typography for the Markdown render kind.
 *
 * Optional: served at /_content/Lumeo.FileViewer/css/file-viewer.css for
 * consumers who want polished markdown. Without it the content still renders
 * via the user-agent stylesheet, just without our spacing / radius tweaks.
 *
 * Scoped to `.lumeo-markdown` so it never bleeds into the host app's own
 * markdown styles. All colors go through Lumeo's CSS variables so dark mode
 * follows automatically. */

.lumeo-markdown { line-height: 1.6; }

.lumeo-markdown > :first-child { margin-top: 0; }
.lumeo-markdown > :last-child  { margin-bottom: 0; }

.lumeo-markdown h1,
.lumeo-markdown h2,
.lumeo-markdown h3,
.lumeo-markdown h4,
.lumeo-markdown h5,
.lumeo-markdown h6 {
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-foreground);
}
.lumeo-markdown h1 { font-size: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.lumeo-markdown h2 { font-size: 1.25rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.25em; }
.lumeo-markdown h3 { font-size: 1.125rem; }
.lumeo-markdown h4 { font-size: 1rem; }
.lumeo-markdown h5 { font-size: 0.95rem; }
.lumeo-markdown h6 { font-size: 0.9rem; color: var(--color-muted-foreground); }

.lumeo-markdown p { margin: 0.75em 0; }

.lumeo-markdown a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lumeo-markdown a:hover { text-decoration: none; }

.lumeo-markdown ul,
.lumeo-markdown ol {
  margin: 0.75em 0;
  padding-left: 1.5em;
}
.lumeo-markdown ul { list-style: disc; }
.lumeo-markdown ol { list-style: decimal; }
.lumeo-markdown li { margin: 0.25em 0; }
.lumeo-markdown li > ul,
.lumeo-markdown li > ol { margin: 0.25em 0; }

.lumeo-markdown blockquote {
  margin: 1em 0;
  padding: 0.25em 1em;
  border-left: 4px solid var(--color-border);
  color: var(--color-muted-foreground);
}

.lumeo-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.15em 0.35em;
  border-radius: var(--radius, 0.375rem);
  background: var(--color-muted);
  color: var(--color-foreground);
}
.lumeo-markdown pre {
  margin: 1em 0;
  padding: 0.9em 1em;
  overflow-x: auto;
  background: var(--color-muted);
  border-radius: var(--radius, 0.5rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  line-height: 1.5;
}
.lumeo-markdown pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.lumeo-markdown hr {
  margin: 1.5em 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.lumeo-markdown table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  font-size: 0.9em;
}
.lumeo-markdown th,
.lumeo-markdown td {
  border: 1px solid var(--color-border);
  padding: 0.4em 0.7em;
  text-align: left;
}
.lumeo-markdown th {
  background: var(--color-muted);
  font-weight: 600;
}

.lumeo-markdown img {
  max-width: 100%;
  border-radius: var(--radius, 0.375rem);
}

.lumeo-markdown kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  vertical-align: middle;
}