/* The Slow Builds - print stylesheet (shared, future-proof)
 *
 * Loaded by every post with:
 *   <link rel="stylesheet" href="/assets/print.css" media="print">
 *
 * Goals:
 *  - readable on paper, A4 or Letter
 *  - hide interactive chrome (buttons, toggles, scroll containers)
 *  - reveal hidden state (collapsed memos, scrollable areas expand)
 *  - stop all animation
 *  - keep tables, cards, panels from breaking mid-element
 *  - show full URLs after links (so QR-less readers can find them)
 *  - serif body, mono for code/data, no background fills
 */

@media print {

  /* ---------- Page setup ---------- */
  @page {
    size: A4;
    margin: 18mm 14mm 20mm 14mm;
  }
  @page :first {
    margin-top: 14mm;
  }

  /* ---------- Reset paper background ---------- */
  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
  }
  body { font-size: 11pt; line-height: 1.5; }
  .post {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---------- Ledger layout: flatten grid + rules for paper ---------- */
  .shell { display: block !important; max-width: 100% !important; padding: 0 !important; }
  .post, .log, .post-aside { border: 0 !important; padding-left: 0 !important; }
  .grain, .glow, .topbar, .foot, .filters,
  .widget, .sim-range, .flow-svg, .flow-packet, .post-aside .back {
    display: none !important;
  }
  /* keep the entry's filed/tagged/by metadata, just unstick it */
  .post-aside { position: static !important; margin: 0 0 1.2em !important; }

  /* ---------- Stop animation & transitions ---------- */
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }

  /* ---------- Force background colors to print where intentional ---------- */
  /* Note: only opt-in for the elements we want bg on (TLDR card, decision panel) */
  .tldr-card, .decision, .receipt-bill, .receipt-detail,
  .memos, .shape-panel, table th, .ledger, pre, blockquote, .pull, .cleo {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ---------- Hide interactive / navigation chrome ---------- */
  .back,
  .topnav,
  .post-foot-nav,
  .race-controls,
  .memos-controls,
  .race-hint,
  .timeline-controls,
  .timeline-hint,
  button,
  .race-btn,
  .memos-btn,
  .timeline-btn,
  .gif-only,
  nav,
  .ssr-only {
    display: none !important;
  }

  /* ---------- Auto-expand timeline + current-setup card on paper ---------- */
  .current-card .row-detail,
  .current-card .row.expandable + .row-detail {
    display: block !important;
  }
  .current-card .row.expandable .v::after {
    content: "" !important;
  }
  .timeline .agent-marker {
    display: none !important;
  }
  .timeline svg .house-box {
    opacity: 1 !important;
  }
  .timeline svg .killer-grp {
    opacity: 1 !important;
  }
  .timeline svg .arrow-line {
    stroke-dashoffset: 0 !important;
  }

  /* ---------- Typography for paper ---------- */
  .post-title {
    font-size: 26pt !important;
    line-height: 1.15;
    page-break-after: avoid;
    break-after: avoid;
  }
  .post-dek {
    font-size: 13pt !important;
    line-height: 1.45;
    page-break-after: avoid;
    break-after: avoid;
  }
  .post-body h2 {
    font-size: 16pt !important;
    page-break-after: avoid;
    break-after: avoid;
    margin-top: 1.6em;
  }
  .post-body h3 {
    font-size: 12pt !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  .post-body p,
  .post-body li {
    orphans: 3;
    widows: 3;
  }

  /* ---------- Keep complex blocks from splitting ---------- */
  table,
  .tldr-card,
  .decision,
  .receipt,
  .shape-panel,
  .memos,
  pre,
  blockquote,
  .pull,
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ---------- Unscrollable scrollable areas ---------- */
  .memos-col-text {
    max-height: none !important;
    overflow: visible !important;
  }

  /* ---------- Three-column memo grid -> stack on paper ---------- */
  .memos-grid,
  .memos-grid-three,
  .shapes,
  .receipt {
    display: block !important;
  }
  .memos-col + .memos-col,
  .shape-panel,
  .receipt-detail {
    border-left: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.15) !important;
    margin-top: 1em;
  }

  /* ---------- Show URLs after external links ---------- */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-style: italic;
    color: #555;
    word-break: break-all;
  }
  /* Don't print URLs for in-page anchors or for image links */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a.no-url::after { content: ""; }

  /* ---------- Tables ---------- */
  table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 10pt;
  }
  th, td {
    border-bottom: 0.5pt solid #ccc;
    padding: 4pt 6pt;
  }
  th { background: #f4f4f4 !important; }

  /* ---------- Code blocks ---------- */
  pre, code {
    font-size: 9.5pt;
    background: #f7f7f7 !important;
    color: #1a1a1a !important;
  }
  pre {
    border-left: 2pt solid #888 !important;
    padding: 8pt 10pt;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ---------- Interactive diagrams: leave the SVG, drop the particles ---------- */
  .shape-svg .particle,
  .diagram-svg #dh-particles {
    display: none !important;
  }

  /* ---------- Footer ---------- */
  .post-foot {
    margin-top: 2em;
    border-top: 0.5pt solid #888 !important;
    padding-top: 0.6em;
    font-size: 9pt;
  }
}