/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Comment markdown styles */
.prose-comment p { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-comment p:first-child { margin-top: 0; }
.prose-comment p:last-child { margin-bottom: 0; }
.prose-comment strong { font-weight: 600; }
.prose-comment em { font-style: italic; }
.prose-comment a { color: var(--color-ink-blue, #2563eb); text-decoration: underline; }
.prose-comment code { background-color: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.85em; }
.prose-comment pre { background-color: #f3f4f6; padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.5rem 0; }
.prose-comment pre code { background: none; padding: 0; font-size: 0.8em; }
.prose-comment blockquote { border-left: 3px solid #d1d5db; padding-left: 0.75rem; color: #6b7280; font-style: italic; margin: 0.5rem 0; }
.prose-comment ul { list-style: disc inside; padding-left: 0.5rem; margin: 0.25rem 0; }
.prose-comment ol { list-style: decimal inside; padding-left: 0.5rem; margin: 0.25rem 0; }
.prose-comment li { margin: 0.125rem 0; }

.dark .prose-comment code { background-color: #1f2937; }
.dark .prose-comment pre { background-color: #1f2937; }
.dark .prose-comment blockquote { border-color: #4b5563; color: #9ca3af; }

/* Table of contents heading highlight */
@keyframes toc-fade {
  0% { background-color: rgba(37, 99, 235, 0.15); }
  100% { background-color: transparent; }
}
.toc-highlight {
  animation: toc-fade 2s ease-out forwards;
  border-radius: 0.25rem;
}
.dark .toc-highlight {
  animation-name: toc-fade-dark;
}
@keyframes toc-fade-dark {
  0% { background-color: rgba(96, 165, 250, 0.2); }
  100% { background-color: transparent; }
}