markon-core 0.15.13

@media print {
  /* ===========================================
   * COMPREHENSIVE PRINT OPTIMIZATION
   * Supports global multilingual typography
   * =========================================== */

  /* ========== GLOBAL RESET & LAYOUT ========== */
  * {
    /* Universal multilingual font stack optimized for print */
    font-family: 
      /* System fonts - best quality */
      -apple-system, BlinkMacSystemFont, "Segoe UI",
      /* Western European languages */
      "Helvetica Neue", Helvetica, Arial,
      /* East Asian languages */
      "Microsoft YaHei", "微软雅黑",                    /* Simplified Chinese (Windows) */
      "PingFang SC", "苹方-简",                         /* Simplified Chinese (macOS) */
      "Hiragino Sans GB", "冬青黑体简体中文",            /* Simplified Chinese (macOS legacy) */
      "Microsoft JhengHei", "微軟正黑體",               /* Traditional Chinese (Windows) */
      "PingFang TC", "苹方-繁",                         /* Traditional Chinese (macOS) */
      "Hiragino Sans CNS", "冬青黑体简体中文",          /* Traditional Chinese (macOS legacy) */
      "Yu Gothic", "游ゴシック", "YuGothic",            /* Japanese (Windows 8.1+) */
      "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", /* Japanese (macOS) */
      "Meiryo", "メイリオ",                             /* Japanese (Windows legacy) */
      "Malgun Gothic", "맑은 고딕",                     /* Korean (Windows) */
      "Apple SD Gothic Neo",                           /* Korean (macOS) */
      /* Indic languages */
      "Noto Sans Devanagari", "Mangal",               /* Hindi, Sanskrit, Marathi */
      "Noto Sans Tamil", "Latha",                     /* Tamil */
      "Noto Sans Bengali", "Vrinda",                  /* Bengali */
      "Noto Sans Gujarati", "Shruti",                 /* Gujarati */
      "Noto Sans Telugu", "Gautami",                  /* Telugu */
      "Noto Sans Kannada", "Tunga",                   /* Kannada */
      "Noto Sans Malayalam", "Kartika",               /* Malayalam */
      "Noto Sans Oriya", "Kalinga",                   /* Oriya */
      "Noto Sans Gurmukhi", "Raavi",                  /* Punjabi */
      /* Arabic and Hebrew */
      "Noto Sans Arabic", "Tahoma", "Arial Unicode MS", /* Arabic */
      "Noto Sans Hebrew", "David", "Miriam",          /* Hebrew */
      /* Cyrillic */
      "Noto Sans", "DejaVu Sans", "Liberation Sans",  /* Russian, Ukrainian, etc. */
      /* Thai and Southeast Asian */
      "Noto Sans Thai", "Tahoma",                     /* Thai */
      "Noto Sans", "Khmer UI",                        /* Khmer */
      /* Fallbacks */
      sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    
    /* Remove backgrounds but preserve colors for better print readability */
    background: transparent !important;
    
    /* Remove shadows and effects for cleaner print */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Page setup with optimized margins and page numbers */
  @page {
    margin-top: 1.5cm;
    margin-right: 1.5cm;
    margin-bottom: 2cm;
    margin-left: 1.5cm;
    size: A4;

    @bottom-center {
      content: counter(page) " / " counter(pages);
      font-size: 10pt;
      color: #666;
    }
  }

  html, body {
    /* Force light paper background in print regardless of OS/theme */
    background: #ffffff !important;
    font-size: 12pt !important;
    line-height: 1.4 !important;
  }

  /* Remove dark backgrounds inside diagrams/content */
  .markdown-body,
  .markon-diagram,
  .markon-diagram svg {
    background: transparent !important;
  }

  /* Note: CSS-based section printing for mobile has been temporarily disabled
   * due to conflicts with browser's native print functionality.
   * Mobile devices will show a message to use browser's built-in print feature. */

  /* ========== CONTAINER & LAYOUT OPTIMIZATION ========== */
  .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-inner {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Remove footer for print */
  .footer {
    display: none !important;
  }

  /* ========== TYPOGRAPHY OPTIMIZATION ========== */
  .markdown-body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
    background: transparent !important;
    color: #000000 !important;
  }

  /* Force black text color on all elements except specific exceptions */
  .markdown-body * {
    color: #000000 !important;
  }

  /* Headings optimization */
  .markdown-body h1 {
    font-size: 18pt !important;
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 12pt !important;
    page-break-after: auto !important;
    page-break-before: auto !important;
    border-bottom: 2pt solid #333 !important;
    padding-bottom: 6pt !important;
  }

  .markdown-body h2 {
    font-size: 16pt !important;
    font-weight: bold !important;
    margin-top: 16pt !important;
    margin-bottom: 8pt !important;
    page-break-after: auto !important;
    page-break-before: auto !important;
    border-bottom: 1pt solid #666 !important;
    padding-bottom: 4pt !important;
  }

  .markdown-body h3 {
    font-size: 14pt !important;
    font-weight: bold !important;
    margin-top: 12pt !important;
    margin-bottom: 6pt !important;
    page-break-after: auto !important;
    page-break-before: auto !important;
  }

  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    font-size: 12pt !important;
    font-weight: bold !important;
    margin-top: 12pt !important;
    margin-bottom: 6pt !important;
    page-break-after: auto !important;
    page-break-before: auto !important;
  }

  /* Paragraph spacing */
  .markdown-body p {
    margin-top: 0 !important;
    margin-bottom: 8pt !important;
    orphans: 3 !important;
    widows: 3 !important;
    color: #000000 !important;
  }

  /* ========== LISTS OPTIMIZATION ========== */
  .markdown-body ul,
  .markdown-body ol {
    margin-top: 0 !important;
    margin-bottom: 8pt !important;
    padding-left: 20pt !important;
  }

  .markdown-body li {
    margin-bottom: 4pt !important;
    page-break-inside: avoid !important;
  }

  /* Task lists */
  .markdown-body .task-list-item {
    list-style: none !important;
  }

  .markdown-body .task-list-item-checkbox {
    margin-right: 6pt !important;
  }

  /* ========== CODE BLOCKS OPTIMIZATION ========== */
  .markdown-body code,
  .markdown-body tt {
    font-family: 
      "Consolas", "Monaco", "Courier New", 
      "DejaVu Sans Mono", "Liberation Mono", 
      "Source Code Pro", "Fira Code",
      monospace !important;
    font-size: 10pt !important;
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1pt solid #ddd !important;
    border-radius: 2pt !important;
    padding: 1pt 3pt !important;
  }

  .markdown-body pre {
    font-family: 
      "Consolas", "Monaco", "Courier New", 
      "DejaVu Sans Mono", "Liberation Mono", 
      "Source Code Pro", "Fira Code",
      monospace !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
    background: #f8f8f8 !important;
    color: #000 !important;
    border: 1pt solid #ccc !important;
    border-radius: 3pt !important;
    padding: 8pt !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    page-break-inside: avoid !important;
  }

  .markdown-body pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
  }

  /* ========== TABLES OPTIMIZATION ========== */
  .markdown-body table {
    border-collapse: collapse !important;
    table-layout: fixed !important;
    width: 100% !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid !important;
  }

  .markdown-body th,
  .markdown-body td {
    border: 1pt solid #666 !important;
    padding: 4pt 8pt !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .markdown-body th code,
  .markdown-body td code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .markdown-body th {
    background: #f0f0f0 !important;
    font-weight: bold !important;
  }

  .markdown-body tbody tr:nth-child(even) {
    background: #f9f9f9 !important;
  }

  /* ========== BLOCKQUOTES & ALERTS ========== */
  .markdown-body blockquote {
    border-left: 3pt solid #666 !important;
    margin: 8pt 0 !important;
    padding: 0 0 0 12pt !important;
    font-style: italic !important;
    background: #f9f9f9 !important;
    page-break-inside: avoid !important;
  }

  /* Markdown alerts */
  .markdown-body .markdown-alert {
    border: 1pt solid #ccc !important;
    border-radius: 3pt !important;
    padding: 8pt !important;
    margin: 8pt 0 !important;
    page-break-inside: avoid !important;
  }

  .markdown-body .markdown-alert-note {
    border-left: 3pt solid #0969da !important;
    background: #f0f8ff !important;
  }

  .markdown-body .markdown-alert-tip {
    border-left: 3pt solid #1a7f37 !important;
    background: #f0fff0 !important;
  }

  .markdown-body .markdown-alert-important {
    border-left: 3pt solid #8250df !important;
    background: #faf0ff !important;
  }

  .markdown-body .markdown-alert-warning {
    border-left: 3pt solid #9a6700 !important;
    background: #fffbf0 !important;
  }

  .markdown-body .markdown-alert-caution {
    border-left: 3pt solid #cf222e !important;
    background: #fff0f0 !important;
  }

  /* ========== LINKS OPTIMIZATION ========== */
  .markdown-body a {
    text-decoration: underline !important;
  }

  /* Print URLs after links - keep gray color */
  .markdown-body a[href]:after {
    content: " (" attr(href) ")" !important;
    font-size: 9pt !important;
    color: #666 !important;
    word-break: break-all !important;
  }

  /* Don't print URLs for relative links or anchors */
  .markdown-body a[href^="#"]:after,
  .markdown-body a[href^="/"]:after,
  .markdown-body a[href*="javascript:"]:after {
    content: "" !important;
  }

  /* ========== IMAGES OPTIMIZATION ========== */
  .markdown-body img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
    border: 1pt solid #ddd !important;
  }

  /* Emoji should stay inline */
  .markdown-body img.emoji {
    border: none !important;
    display: inline !important;
    margin: 0 !important;
  }

  /* ========== NAVIGATION & UI ELEMENTS ========== */
  /* Hide elements that don't make sense in print */
  .anchor,
  .octicon,
  .task-list-item .handle,
  [data-footnote-backref],
  .section-print-btn,
  .section-action,
  .section-actions,
  .section-action-separator,
  .section-expand-toggle,
  .viewed-checkbox-label,
  .toc,
  #toc-container,
  .shortcuts-help-panel,
  .selection-popover,
  .note-popup,
  header,
  .footer {
    display: none !important;
  }

  /* ========== COLLAPSED SECTIONS ==========
   * Default (data-print-collapsed-content="false"): keep the user's collapse
   * state — content stays hidden via .section-content-hidden, but show the
   * placeholder so a reader can tell something was deliberately omitted.
   * When data-print-collapsed-content="true" the cascade below flips: the
   * placeholder is hidden and the content is forced visible. */
  .section-collapsed-placeholder {
    display: block !important;
    color: #666 !important;
    font-style: italic !important;
    margin: 4pt 0 !important;
    padding: 2pt 0 !important;
  }
  /* Strip the live-UI hover affordance so the heading prints normally. */
  html .markdown-body .section-collapsed {
    opacity: 1 !important;
    cursor: auto !important;
  }

  html[data-print-collapsed-content="true"] .section-collapsed-placeholder {
    display: none !important;
  }
  /* Force-show content that the JS hid for collapse. Matches editor.css's
   * .section-content-hidden block and explicitly reverses each !important
   * override so the printed output looks like an expanded section. */
  html[data-print-collapsed-content="true"] .section-content-hidden {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: revert !important;
    margin-bottom: revert !important;
    padding-top: revert !important;
    padding-bottom: revert !important;
    overflow: visible !important;
  }

  /* ========== PAGE BREAK CONTROL ========== */
  /* Allow page breaks in heading sections to prevent blank pages */
  .heading-section {
    page-break-inside: auto !important;
    break-inside: auto !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure all container divs allow page breaks */
  .markdown-body div {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  .markdown-body h1,
  .markdown-body h2 {
    page-break-before: auto !important;
    page-break-after: avoid !important;
  }

  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    page-break-after: avoid !important;
  }

  .markdown-body pre,
  .markdown-body blockquote,
  .markdown-body table,
  .markdown-body .markdown-alert {
    page-break-inside: avoid !important;
  }

  /* Avoid orphans and widows */
  .markdown-body p,
  .markdown-body li {
    orphans: 3 !important;
    widows: 3 !important;
  }

  /* ========== DIAGRAMS ========== */
  /* Rendered diagrams - move border to inner graphic to avoid border-only pages */
  .markon-diagram {
    page-break-inside: auto !important;
    border: none !important;
    padding: 0 !important;
    margin: 8pt 0 !important;
    overflow: visible !important;
  }
  .markon-diagram svg,
  .markon-diagram img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 85vh !important; /* scale down to fit current page height */
    object-fit: contain !important;
    page-break-before: auto !important;
    page-break-inside: avoid !important; /* keep each graphic in one page; may move to next if not enough space */
    border: none !important;
  }
  /* Reduce gap between heading and first diagram to help fit on current page */
  .markdown-body h1 + .markon-diagram,
  .markdown-body h2 + .markon-diagram,
  .markdown-body h3 + .markon-diagram {
    margin-top: 6pt !important;
  }

  /* Force light theme colors for Rendered diagrams in print mode */
  /* Override dark theme backgrounds and colors */
  .markon-diagram svg * {
    /* Remove all dark backgrounds from SVG elements */
    background: transparent !important;
  }

  /* Rendered diagram elements - force light theme colors */
  .markon-diagram svg rect,
  .markon-diagram svg circle,
  .markon-diagram svg ellipse,
  .markon-diagram svg polygon,
  .markon-diagram svg path {
    /* Remove dark fills, preserve stroke for visibility */
    fill: #ffffff !important;
  }

  /* Preserve stroke colors but ensure they're visible on white */
  .markon-diagram svg .node rect,
  .markon-diagram svg .node circle,
  .markon-diagram svg .node ellipse,
  .markon-diagram svg .node polygon {
    stroke: #333333 !important;
    stroke-width: 1.5px !important;
  }

  /* Edge paths and arrows */
  .markon-diagram svg .edgePath path,
  .markon-diagram svg .flowchart-link {
    stroke: #333333 !important;
    fill: none !important;
  }

  .markon-diagram svg marker path {
    fill: #333333 !important;
    stroke: #333333 !important;
  }

  /* Text labels - ensure dark text on white background */
  .markon-diagram svg text,
  .markon-diagram svg .nodeLabel,
  .markon-diagram svg .edgeLabel,
  .markon-diagram svg .label {
    fill: #000000 !important;
    color: #000000 !important;
  }

  /* Label backgrounds */
  .markon-diagram svg .labelBkg,
  .markon-diagram svg .edgeLabel rect {
    fill: #ffffff !important;
    stroke: #cccccc !important;
  }

  /* Cluster/subgraph backgrounds */
  .markon-diagram svg .cluster rect,
  .markon-diagram svg g.cluster polygon {
    fill: #f9f9f9 !important;
    stroke: #666666 !important;
  }

  /* Note boxes and special elements */
  .markon-diagram svg .note rect,
  .markon-diagram svg .noteText {
    fill: #fffbea !important;
    stroke: #666666 !important;
  }

  /* State diagram specific */
  .markon-diagram svg .statediagram-state rect {
    fill: #ffffff !important;
    stroke: #333333 !important;
  }

  /* Sequence diagram specific */
  .markon-diagram svg .actor {
    fill: #ffffff !important;
    stroke: #333333 !important;
  }

  .markon-diagram svg .actor-line {
    stroke: #666666 !important;
  }

  .markon-diagram svg .messageLine0,
  .markon-diagram svg .messageLine1 {
    stroke: #333333 !important;
  }

  .markon-diagram svg .activation0,
  .markon-diagram svg .activation1,
  .markon-diagram svg .activation2 {
    fill: #f4f4f4 !important;
    stroke: #666666 !important;
  }

  /* Class diagram specific */
  .markon-diagram svg .classGroup rect {
    fill: #ffffff !important;
    stroke: #333333 !important;
  }

  .markon-diagram svg .divider {
    stroke: #666666 !important;
  }

  /* Gantt chart specific */
  .markon-diagram svg .task,
  .markon-diagram svg .taskText {
    fill: #ffffff !important;
    stroke: #333333 !important;
  }

  .markon-diagram svg .grid .tick line {
    stroke: #e0e0e0 !important;
  }

  /* ========== UTILITY CLASSES ========== */
  .print-break-before {
    page-break-before: always !important;
  }

  .print-break-after {
    page-break-after: always !important;
  }

  .print-no-break {
    page-break-inside: avoid !important;
  }

  .print-hide {
    display: none !important;
  }

  /* ========== ANNOTATION HIGHLIGHTS ========== */
  /* Orange highlight */
  .highlight-orange {
    background-color: rgba(255, 165, 0, 0.3) !important;
    border-bottom: 1pt solid rgba(255, 140, 0, 0.6) !important;
  }

  /* Green highlight */
  .highlight-green {
    background-color: rgba(144, 238, 144, 0.4) !important;
    border-bottom: 1pt solid rgba(60, 179, 113, 0.6) !important;
  }

  /* Yellow highlight */
  .highlight-yellow {
    background-color: rgba(255, 255, 0, 0.3) !important;
    border-bottom: 1pt solid rgba(218, 165, 32, 0.6) !important;
  }

  /* Strikethrough - keep gray color */
  .strikethrough,
  .strikethrough * {
    text-decoration: line-through !important;
    color: #666 !important;
  }

  /* Note highlights - shown with distinct visual marker */
  .has-note {
    background-color: rgba(255, 99, 71, 0.15) !important;
    border-bottom: 2pt dotted rgba(255, 99, 71, 0.5) !important;
  }

  /* Hide interactive UI elements but keep highlights */
  .selection-popover,
  .note-input-modal,
  .note-card-margin,
  .note-popup,
  .confirm-dialog,
  .note-actions,
  .note-link,
  .note-edit,
  .note-delete {
    display: none !important;
  }
}

@media print {
  /* Keep only content area for print - generic fallback */
  body > *:not(.container):not(.markdown-body) { display: none !important; }
  /* If there is a container wrapper, keep only markdown-body inside it */
  body > .container > *:not(.markdown-body) { display: none !important; }

  html, body { margin: 0 !important; padding: 0 !important; }
  .markdown-body {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }
  .markdown-body > :first-child {
    break-before: auto !important;
    page-break-before: auto !important;
    margin-top: 0 !important;
  }
}