/* Prose (content) styles */
.prose {
  font-size: var(--text-base);
  line-height: var(--text-base-height);
}

.prose a {
  border-bottom: 1px solid;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.prose a:link {
  color: var(--link-primary);
  border-color: var(--link-border);
}

.prose a:visited {
  color: var(--link-visited);
  border-color: var(--link-visited-border);
}

.prose a:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.prose a:active,
.prose a:hover {
  color: var(--link-hover);
  border-bottom-width: 2px;
  border-color: var(--link-border-hover);
}

.prose b,
.prose strong {
  font-weight: 600;
}

.prose code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.prose code::before,
.prose code::after {
  color: var(--text-muted);
  content: "`";
}

.prose pre {
  background-color: var(--bg-code);
  margin-top: var(--space-8);
  color: var(--text-code);
  overflow: hidden;
}

.prose pre + :not(h2):not(h3):not(h4) {
  margin-top: var(--space-8);
}

.prose pre > code {
  display: block;
  overflow-x: auto;
  padding: var(--space-6);
}

.prose pre > code::before,
.prose pre > code::after {
  content: "";
  display: none;
}

.prose h2,
.prose h3,
.prose h4 {
  font-weight: 600;
  color: var(--text-primary);
}

.prose h2 {
  margin-bottom: var(--space-4);
  margin-top: var(--space-10);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-height);
}

.prose h3 {
  margin-bottom: var(--space-2);
  margin-top: var(--space-10);
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose h4 {
  margin-bottom: var(--space-2);
  margin-top: var(--space-10);
  font-size: var(--text-lg);
  line-height: var(--text-lg-height);
}

.prose img {
  display: block;
  height: auto;
  margin-top: var(--space-8);
  position: relative;
  width: 100%;
}

.prose img + :not(h2):not(h3):not(h4) {
  margin-top: var(--space-8);
}

.prose i,
.prose em {
  font-style: italic;
}

.prose ol,
.prose ul {
  list-style-position: outside;
  margin-top: var(--space-4);
}

.prose ol + :not(h2):not(h3):not(h4),
.prose ul + :not(h2):not(h3):not(h4) {
  margin-top: var(--space-4);
}

.prose li {
  margin-top: var(--space-2);
  padding-left: var(--space-1);
}

.prose ol {
  list-style-type: decimal;
  margin-left: var(--space-8);
}

.prose ol > li::marker {
  color: var(--color-gray-600);
}

.prose ul {
  list-style-type: disc;
  margin-left: var(--space-6);
}

.prose ul > li::marker {
  color: var(--color-gray-400);
}

.prose p {
  margin-top: var(--space-4);
}

.prose sup {
  margin-left: 0.125rem;
  margin-right: var(--space-1);
}

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

.prose table {
  margin-bottom: var(--space-8);
  margin-top: var(--space-4);
  width: 100%;
}

.prose th {
  font-weight: 600;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border-dark);
}

.prose td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border-muted);
}

/* Prose size variants */
.prose-sm {
  font-size: var(--text-base);
  line-height: var(--text-base-height);
}

.prose-sm h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose-sm h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg-height);
}

.prose-sm h4 {
  font-size: var(--text-base);
  line-height: var(--text-base-height);
}

.prose-base {
  font-size: var(--text-base);
  line-height: var(--text-base-height);
}

.prose-base h2 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-height);
}

.prose-base h3 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose-base h4 {
  font-size: var(--text-lg);
  line-height: var(--text-lg-height);
}

.prose-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg-height);
}

.prose-lg h2 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-height);
}

.prose-lg h3 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-height);
}

.prose-lg h4 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose-xl h2 {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-height);
}

.prose-xl h3 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-height);
}

.prose-xl h4 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-height);
}

/* Prose lede styles */
.prose-lede > p:first-of-type {
  border-bottom: 2px solid var(--border-muted);
  padding-bottom: var(--space-8);
}

.prose-lede > p:first-of-type + * {
  margin-top: var(--space-8);
}

.prose-lede-base > p:first-of-type {
  font-size: var(--text-base);
  line-height: var(--text-base-height);
}

.prose-lede-lg > p:first-of-type {
  font-size: var(--text-lg);
  line-height: var(--text-lg-height);
}

.prose-lede-xl > p:first-of-type {
  font-size: var(--text-xl);
  line-height: var(--text-xl-height);
}

.prose-lede-2xl > p:first-of-type {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-height);
}

/* Footnotes */
.prose .footnotes {
  border-top: 1px solid var(--border-primary);
  margin-top: var(--space-8);
  padding-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-height);
}

.prose .footnotes ol {
  margin-left: var(--space-6);
}

@media (min-width: 768px) {
  .prose-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg-height);
  }
}