@media print {
  /* Remove all margins so browser print dialog controls page margins */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  pre, pre code {
    white-space: pre-wrap !important;
    overflow-x: hidden !important;
    page-break-inside: avoid;
  }
  
  body {
    font-size: 18px !important;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  
  .content-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  article, main, section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Base document styles */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: white;
  margin: 0;
  padding: 0;
}

.content-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-size: 20px !important;
  /* Magazine-style container */
}

/* Fix for Safari which doesn't support :has */
html:not(:has(details[open])) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Core typography fixes that tailwind sometimes doesn't handle well */
.prose p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
}

.prose p + p {
  margin-top: 1.2em !important;
}

.prose h1 + p, .prose h2 + p, .prose h3 + p, .prose h4 + p, .prose h5 + p, .prose h6 + p {
  margin-top: 1em !important;
}

/* List styling */
.prose ul, .prose ol {
  padding-left: 2rem !important;
  margin-top: 1.2em !important;
  margin-bottom: 2.2em !important;
}

.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

.prose li {
  font-size: 20px !important;
  margin-bottom: 0.5em !important;
  line-height: 1.6 !important;
  position: relative !important;
}

.prose li::marker {
  color: #666 !important;
  font-weight: 600 !important;
}

/* Ensure nested lists under a numbered list have proper spacing */
.prose ol > li > ul, .prose ol > li > ol {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* Give some extra padding after a list */
.prose ul + p, .prose ol + p, .prose ul + pre, .prose ol + pre {
  margin-top: 2em !important;
}

/* Heading sizes with strong important overrides */
.prose h1 {
  font-size: 64px !important;
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.prose h2 {
  font-size: 48px !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.prose h3 {
  font-size: 36px !important;
  margin-top: 2.2rem !important;
  margin-bottom: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.prose h4 {
  font-size: 28px !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.prose h5 {
  font-size: 22px !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.prose h6 {
  font-size: 18px !important;
  margin-top: 1.8rem !important;
  margin-bottom: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}


/* Code elements get 16px */
code[style*="font-size"], pre[style*="font-size"], .language-bash[style*="font-size"] {
  font-size: 16px !important;
}

/* Blockquotes */
blockquote {
  margin: 2em 0;
  padding: 1em 1.5em;
  border-left: 4px solid #e2e8f0;
  background-color: #f8fafc;
  font-style: italic;
}

blockquote p {
  margin: 0.5em 0;
}

blockquote + p {
  margin-top: 2em;
}

/* Enhanced table styling - use auto layout for natural column sizing */
.prose table,
table.w-full,
article table,
div table,
.table-responsive table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  table-layout: auto;
  display: table;
}

/* Table wrapper to handle overflow properly */
.table-responsive,
div.overflow-x-auto {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 2em 0;
  display: block;
}

.prose table th, .prose table td {
  padding: 0.75em 1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose table th {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Grid-based tables for special formatting needs */
.grid-table {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 0.5em 1em;
  width: 100%;
  margin: 2em 0;
}

.grid-table-cell {
  padding: 0.5em;
  align-self: start;
}

.grid-table-header {
  font-weight: 600;
}

/* Specific formatting for scaling operations tables */
.scaling-table {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  width: 100%;
  margin: 2em 0;
  gap: 0.75em;
}

.scaling-table > div {
  padding: 0.5em;
}

.scaling-item {
  font-weight: 600;
}

.scaling-compare {
  color: rgba(0, 0, 0, 0.7);
}

/* Code blocks with proper contrast */
.prose pre {
  background-color: rgba(0, 0, 0, 0.8) !important;
  margin: 2em 0 !important;
  padding: 1.5em !important;
  border-radius: 0.5em !important;
  overflow-x: auto !important;
  position: relative !important;
}

/* Fix for inline code blocks to ensure visibility with proper contrast */
.prose :not(pre) > code {
  font-family: Monaco, Consolas, "Courier New", monospace !important;
  font-size: 16px !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #333 !important;
  padding: 0.2em 0.4em !important;
  border-radius: 0.25em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Code within pre blocks should have proper contrast */
.prose pre code {
  font-family: Monaco, Consolas, "Courier New", monospace !important;
  font-size: 16px !important;
  color: #f8f8f2 !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: pre !important;
}

/* Code block copy button */
.copy-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em 0.5em;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 0.8em;
  transition: background-color 0.2s;
  opacity: 0;
}

.copy-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

pre:hover .copy-button {
  opacity: 1;
}

/* File type badge */
.file-type-badge {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 0.25em;
  font-size: 0.8em;
  font-weight: bold;
}

pre:has(.file-type-badge) .copy-button {
  top: 2.5em;
}

/* Hide "code" label when no specific language is set */
.file-type-badge.code {
  display: none;
}

/* ============================================
   VISUAL ELEMENT SPACING
   Consistent spacing for images, SVG, mermaid, figures
   ============================================ */

/* Base visual element spacing - consistent 1.5em above and below */
:root {
  --visual-spacing-top: 1.5em;
  --visual-spacing-bottom: 1.5em;
  --visual-spacing-print-top: 1em;
  --visual-spacing-print-bottom: 1em;
}

/* Figure element - wrapper for images with captions */
figure {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
  text-align: center;
  display: block;
}

/* Images - standalone or within figures */
img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Standalone images (not in figure) get vertical spacing */
p > img,
article > img,
section > img,
main > img,
.prose > img {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
}

/* Images inside figures don't need extra spacing */
figure img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figure captions */
figcaption {
  margin-top: 0.75em;
  font-size: 0.9em;
  color: #64748b;
  font-style: italic;
  text-align: center;
}

/* Alt text is visually hidden but accessible for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Imgix handling */
img[src*="imgix.net"] {
  max-width: 100%;
  height: auto;
}

/* Links */
a {
  color: #3182ce;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Footer style */
.mt-16 {
  margin-top: 4rem;
}

.pt-8 {
  padding-top: 2rem;
}

/* Ultra-specific heading overrides that will take precedence over any inheritance */
.prose h1, h1, article h1, body h1, div h1, *:not(.not-prose) h1, * h1 {
  font-size: 56px !important;
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #000 !important;
}

.prose h2, h2, article h2, body h2, div h2 {
  font-size: 36px !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.prose h3, h3, article h3, body h3, div h3 {
  font-size: 32px !important;
  margin-top: 2.2rem !important;
  margin-bottom: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.prose h4, h4, article h4, body h4, div h4, *:not(.not-prose) h4, * h4 {
  font-size: 24px !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #333 !important;
}

.prose h5, h5, article h5, body h5, div h5 {
  font-size: 22px !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.prose h6, h6, article h6, body h6, div h6 {
  font-size: 18px !important;
  margin-top: 1.8rem !important;
  margin-bottom: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.border-t {
  border-top: 1px solid #E2E8F0;
}

.border-gray-200 {
  border-color: #E2E8F0;
}

.text-sm {
  font-size: 0.875rem;
}

.text-gray-500 {
  color: #718096;
}

/* Math styles */
.math-block {
  margin: 2em 0;
  overflow-x: auto;
  padding: 1em;
  background-color: rgba(247, 250, 252, 0.8);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.math-inline {
  padding: 0 0.2em;
}

/* Increase specificity for MathJax elements */
.MathJax {
  font-size: 1.1em !important;
}

/* Checkbox styling with FontAwesome icons */
.checkbox-item {
  list-style: none;
  margin-left: -1.5em;
  padding-left: 0;
}

.checkbox-icon {
  color: #6b7280;
  font-size: 1.1em;
  margin-right: 0.5em;
  vertical-align: middle;
}

.checkbox-checked .checkbox-icon {
  color: #10b981;
}

/* SVG responsive styling */
.svg-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* SVG container with consistent spacing */
.svg-container {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 100%;
  overflow-x: auto;
}

.svg-container svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Standalone SVG elements (not in container) */
article > svg,
section > svg,
main > svg,
.prose > svg {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Mermaid diagram containers - consistent spacing */
.mermaid {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
  text-align: center;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Signature block styling for SVG signatures */
.signature-block {
  margin-top: var(--visual-spacing-top);
  margin-bottom: var(--visual-spacing-bottom);
  padding: 1em;
  border-top: 1px solid #e5e7eb;
}

.signature-block svg {
  max-width: 300px;
  height: auto;
}

/* Print styling for visual elements */
@media print {
  /* Consistent print spacing for all visual elements */
  figure,
  .svg-container,
  .mermaid,
  article > img,
  section > img,
  main > img,
  .prose > img {
    margin-top: var(--visual-spacing-print-top);
    margin-bottom: var(--visual-spacing-print-bottom);
    page-break-inside: avoid;
  }
  
  .svg-responsive {
    max-width: 6in;
  }
  
  /* Ensure images don't overflow in print */
  img, svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ============================================
   PRINT PAGE BREAK SUPPORT
   ============================================ */

/* Manual page break - use <!-- pagebreak --> in markdown */
.page-break {
  page-break-before: always;
  break-before: page;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* Print-specific page break rules */
@media print {
  /* Force page break before h1 (new chapters/volumes) */
  h1 {
    page-break-before: always;
    break-before: page;
  }
  
  /* First h1 should not have page break before it */
  section:first-of-type h1:first-child,
  article:first-of-type h1:first-child,
  main > h1:first-child {
    page-break-before: auto;
    break-before: auto;
  }
  
  /* Keep headings with their following content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  /* Prevent page breaks inside these elements */
  table, figure, pre, blockquote, ul, ol {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* For very long tables, allow breaks but keep header visible */
  table.allow-break {
    page-break-inside: auto;
    break-inside: auto;
  }
  
  table.allow-break thead {
    display: table-header-group;
  }
  
  table.allow-break tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Orphan and widow control for paragraphs */
  p {
    orphans: 3;
    widows: 3;
  }
  
  /* Keep images with their captions */
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Keep list items together */
  li {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ============================================
   TABLE STYLING
   ============================================ */

/* Tables use auto layout to fit content naturally */
table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

/* Ensure table cells don't overlap */
table th,
table td {
  padding: 0.75em 1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

table th {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Print table sizing */
@media print {
  table {
    font-size: 10pt;
  }
  
  table th, table td {
    padding: 4pt 8pt;
  }
}