/*
 * 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.
 */
/* FORCE MARKDOWN HEADERS */
.prose h1 {
  font-size: 2.25rem; /* Big (36px) */
  line-height: 2.5rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 0.8em;
  color: #111827;
}

.prose h2 {
  font-size: 1.5rem; /* Medium-Big (24px) */
  line-height: 2rem;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  color: #374151;
  border-bottom: 1px solid #e5e7eb; /* Adds a nice underline to H2s */
  padding-bottom: 0.3em;
}

.prose p {
  margin-bottom: 1.25em;
  line-height: 1.75;
  color: #4b5563;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.625em;
  margin-bottom: 1.25em;
}

/* FORCE TABLE STYLES */
.prose table {
  width: 100%;
  border-collapse: collapse; /* Merges borders nicely */
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875rem; /* Text-sm */
}

.prose thead {
  background-color: #f9fafb; /* Light gray background for headers */
}

.prose th {
  font-weight: 600;
  color: #111827;
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb; /* Gray border */
}

.prose td {
  padding: 0.75rem 1rem;
  color: #374151;
  border: 1px solid #e5e7eb; /* Gray border */
}

/* Optional: Zebra striping for readability */
.prose tr:nth-child(even) {
  background-color: #fcfcfc;
}

/* LaTeX-style Environments */

/* THEOREM: Italic body, bold header */
.math-theorem {
  margin-bottom: 1.5rem;
  font-style: italic; /* The standard LaTeX look */
}

.math-theorem strong {
  font-style: normal; /* "Theorem" label stands up straight */
  font-weight: 800;   /* Extra bold */
  margin-right: 0.5rem;
}

/* PROOF: Normal body, Italic header, QED box */
.math-proof {
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.math-proof strong {
  font-style: italic; /* "Proof" label is usually italic in LaTeX */
  font-weight: bold;
  margin-right: 0.5rem;
}

/* The Q.E.D. Box (Halmos Symbol) */
.qed-box {
  float: right;
  margin-top: -1.2em; /* Pull it up to sit on the last line */
  font-size: 1.2em;
}

/* DEMO CONTAINER */
.demo-card {
  border: 1px solid #e5e7eb; /* Light gray border */
  border-radius: 0.5rem;     /* Rounded corners */
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* The Header (Mac browser style dots) */
.demo-header {
  background-color: #f3f4f6;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.browser-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.dot-red { background-color: #ef4444; }
.dot-yellow { background-color: #f59e0b; }
.dot-green { background-color: #10b981; }

/* The Live Demo Area */
.demo-preview {
  padding: 2rem;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  /* Center the content */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The Code Snippet Area */
.demo-code {
  background-color: #0d1117; /* GitHub Dark bg */
  padding: 0;
  margin: 0;
}
.demo-code pre {
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
}