/* Styling of the rendered document. Shared by the editor preview and the print page
   so the preview matches the PDF. Tailwind's preflight resets most element styles,
   hence lists, links and headings are styled explicitly here. */

#preview {
  line-height: 1.6;
  color: #333;
  overflow-wrap: break-word;
}

#preview > :first-child {
  margin-top: 0;
}

#preview h1,
#preview h2,
#preview h3,
#preview h4,
#preview h5,
#preview h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.3;
  color: #2563eb;
}

#preview h1 {
  font-size: 1.8em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #e5e7eb;
}

#preview h2 {
  font-size: 1.5em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #e5e7eb;
}

#preview h3 { font-size: 1.3em; }
#preview h4 { font-size: 1.1em; }
#preview h5,
#preview h6 { font-size: 1em; }

#preview p {
  margin-bottom: 1em;
}

#preview a {
  color: #2563eb;
  text-decoration: underline;
}

#preview strong { font-weight: 600; }
#preview em { font-style: italic; }

#preview ul,
#preview ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
  padding-left: 0.5em;
}

#preview ul { list-style: disc; }
#preview ul ul { list-style: circle; }
#preview ul ul ul { list-style: square; }
#preview ol { list-style: decimal; }

#preview li {
  margin-bottom: 0.5em;
}

#preview li > ul,
#preview li > ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

#preview blockquote {
  border-left: 3px solid #e5e7eb;
  padding-left: 1em;
  margin: 1em 0;
  color: #4b5563;
  font-style: italic;
}

#preview hr {
  margin: 1.5em 0;
  border-color: #e5e7eb;
}

#preview img {
  max-width: 100%;
  height: auto;
}

#preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

#preview th,
#preview td {
  border: 1px solid #e5e7eb;
  padding: 0.5em;
  text-align: left;
  vertical-align: top;
}

#preview th {
  background-color: #f8fafc;
  font-weight: 600;
}

#preview pre {
  background-color: #f8fafc;
  border-radius: 4px;
  padding: 0.75rem;
  white-space: pre-wrap;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  margin: 1em 0;
}

#preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background-color: rgba(226, 232, 240, 0.4);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 90%;
}

#preview pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 100%;
}

/* Math */
#preview .math-inline {
  display: inline-block;
  vertical-align: middle;
}

#preview .math-display {
  text-align: center;
  margin: 1rem 0;
  overflow-x: auto;
  padding: 0.5rem 0;
}

/* MathJax tweaks carried over unchanged from the previous preview/print styles */
mjx-container {
  display: inline-block !important;
  text-align: center !important;
  margin: 0 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

mjx-container svg {
  display: inline-block !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

mjx-container svg line,
mjx-container svg path {
  vector-effect: non-scaling-stroke !important;
  stroke-width: 0.6 !important;
}

mjx-container[jax="SVG"] > svg use[data-c="221A"],
mjx-container use[href*="sqrt"],
mjx-container use[xlink\:href*="sqrt"] {
  overflow: visible !important;
}

/* Print: keep headings with their content, avoid splitting small blocks */
@media print {
  #preview h1, #preview h2, #preview h3,
  #preview h4, #preview h5, #preview h6 {
    break-after: avoid;
  }

  #preview pre, #preview blockquote, #preview img,
  #preview tr, #preview .math-display {
    break-inside: avoid;
  }

  #preview thead {
    display: table-header-group; /* repeat table header on each page */
  }

  #preview a {
    color: inherit;
  }
}