/* ═══════════════════════════════════════════════════════════════════════════
   MudUp — PRINT SYSTEM (2026-07-25)

   Founder ask (2026-07-24): "there should be a print view for each of the
   groups, each page, product / ticket ledger and summary manager."
   (2026-07-25): "Build the print views for the ledger, you shouldn't have
   waited for me there."

   Approach is CSS-first. Every one of these surfaces already renders the
   complete, correct record on screen — what paper needs is different
   FURNITURE, not a different document. So a real print stylesheet strips the
   app chrome, forces the ink to black-on-white, un-contains the scrolling
   grids so no column is ever clipped at the sheet edge, and lays down
   page-break rules per card/group. No parallel templates to drift out of sync
   with the live one. The DMR pdf-preview is the register: professional,
   terse, citations kept.

   Loaded LAST in layout.html (after mobile.css) so these rules win the
   cascade against every page-specific sheet. Surface-specific print sections
   live at the EOF of summary.css and ledger.css and are scoped tighter
   (`.well-summary …` / `.tt-content …`) so they win where they must.

   This file is loaded with no `media` attribute on purpose: it carries a
   handful of SCREEN rules too (the print-only furniture below must be hidden
   on screen), with everything else inside `@media print`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── screen: print-only furniture never shows in the app ─────────────────── */
.print-only { display: none !important; }

@media print {

  /* ── 1. Page boxes ──────────────────────────────────────────────────────
     Portrait letter is the default sheet. Wide grids (the ledger matrices,
     the Properties matrix) claim a named LANDSCAPE page via `page:` below —
     a browser without named-page support simply keeps them portrait, where
     they still print complete (columns wrap, nothing clips). */
  @page { size: letter portrait; margin: 13mm 11mm; }
  @page mudup-wide { size: letter landscape; margin: 9mm; }

  /* ── 2. Palette — black on white, from the LIGHT theme tokens ───────────
     A dark-theme session must never print dark ink: re-point the semantic
     tokens to their light values for every theme attribute. Same specificity
     as tokens.css's own blocks (0,1,0) and this file loads later, so it wins
     without !important. Surfaces flatten to paper white; the neutral ramp
     keeps the type hierarchy readable in one colour. */
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    color-scheme: light;

    --bg-canvas:       #FFFFFF;
    --bg-surface:      #FFFFFF;
    --bg-surface-sunk: #FFFFFF;
    --bg-row-hover:    #FFFFFF;
    --bg-row-selected: #FFFFFF;
    --bg-row-zebra:    #FFFFFF;
    --bg-reference:    #FFFFFF;
    --brand-tint:      #FFFFFF;

    --text-1: #000000;
    --text-2: #1A1A1A;
    --text-3: #3A3A3A;
    --text-4: #5A5A5A;
    --text-on-brand: #000000;
    --accent-fg: #000000;

    --border-default: #9A9A9A;
    --border-strong:  #6E6E6E;
    --border-subtle:  #C4C4C4;
    --border-input:   #9A9A9A;

    /* Status stays semantic but goes monochrome-with-a-hint: the FOREGROUND
       keeps just enough hue to survive a colour printer, the backgrounds go
       white so a laser printer never lays down a grey slab behind a pill. */
    --status-pass-fg: #14532A; --status-pass-bg: #FFFFFF; --status-pass-bd: #7A7A7A;
    --status-warn-fg: #6B4400; --status-warn-bg: #FFFFFF; --status-warn-bd: #7A7A7A;
    --status-fail-fg: #7A1414; --status-fail-bg: #FFFFFF; --status-fail-bd: #7A7A7A;
    --status-info-fg: #14305C; --status-info-bg: #FFFFFF; --status-info-bd: #7A7A7A;
    --status-running-fg: #5C2A0C; --status-running-bg: #FFFFFF; --status-running-bd: #7A7A7A;

    --num-positive: #14532A;
    --num-negative: #7A1414;
    --num-zero: #3A3A3A;

    --shadow-1: none;
    --shadow-2: none;
    --shadow-focus: none;
  }

  /* ── 2b. Un-pin the document from ONE viewport ─────────────────────────
     THE BUG THIS FIXES: mobile.css:38/44 pin the document box —
       html, body { overflow-x: clip; max-width: 100vw; }
       html:has(.appshell-main), body:has(.appshell-main)
         { overflow-y: clip; max-height: 100vh; }
     — so the app shell scrolls internally and the page itself never does.
     Correct on screen. Fatal on paper: while printing, `100vh` IS one sheet,
     so <body> is clamped to a single page with `overflow: clip` and Chromium
     emits a ONE-PAGE PDF no matter how long the record is. Measured on the
     ledger Tickets group with 104 tickets: `.appshell` laid out 14,087px tall
     while `body` computed height:1000px / max-height:1000px / overflow:clip,
     and page.pdf() produced 1 page holding roughly one ticket.

     The selectors above use :has(), so they out-specify a bare `html, body`;
     these are matched at equal-or-higher specificity AND flagged, so the
     document can grow to its real height and paginate.
     Any `height`/`max-height`/`overflow` clamp on the document is wrong in
     print — paper is unbounded in the block direction. */
  html, body,
  html:has(.appshell-main), body:has(.appshell-main) {
    background: #FFFFFF !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  * { box-shadow: none !important; text-shadow: none !important; }

  /* ── 3. Chrome off ─────────────────────────────────────────────────────
     Everything that exists to NAVIGATE or MUTATE the app is furniture, not
     record: the app bar, the nav rail, tab strips, filter forms, buttons,
     breadcrumbs, the theme/tenant/feedback controls, and the deploy banner.
     `.no-print` / `[data-print-hide]` are the general opt-outs. */
  .appbar-d1,
  .nav-rail,
  .nav-rail-backdrop,
  .nav-toggle-btn,
  .tenant-switcher,
  .appbar-suggest,
  .appbar-user,
  .appbar-signout,
  #suggest-edit-toggle,
  [data-theme-toggle],
  .version-banner,
  .feedback-mode-bar,
  .feedback-popover,
  .no-print,
  [data-print-hide],
  button,
  .btn,
  select,
  input,
  /* NOT a blanket `form` — a <form> is not always a control strip. The Well
     Summary Properties view wraps each "every mud check" CARD in the
     favorite-toggle form, so hiding all forms silently dropped the entire
     per-check property matrix off the printed record (caught in print-to-PDF
     review: the Properties sheet came out as headline stats only). Hide the
     form elements that are genuinely just controls; every other form collapses
     to nothing on its own once its buttons/inputs/selects are hidden above. */
  .sum-well-selector,
  .tt-wellwrap,
  .tt-filterform,
  .tabs,
  .sum-tabs-wrap,
  .sum-crumbs,
  .tt-breadcrumb,
  .tt-tabs,
  .tt-filters,
  .tt-header-actions,
  .tt-actions,
  .sum-actions {
    display: none !important;
  }

  /* Links print as plain black text — a URL-blue underline on paper is noise,
     and the destination is unreachable from a sheet. The record's own
     citations are plain text and stay. */
  a, a:visited { color: #000000 !important; text-decoration: none !important; }

  /* Navigation-only links inside a card footer / ticket meta carry no record
     value on paper ("Review costs", "Open report"). The footer's citation
     SPAN beside them stays — that is the traceability line. */
  .sum-card-foot a,
  .tt-ticket-meta .tt-open,
  .tt-open {
    display: none !important;
  }

  /* ── 4. Shell reflow ───────────────────────────────────────────────────
     The app shell is a fixed-header + rail + scrolling-main grid. On paper
     there is one column and the paper itself is the scroll. */
  .appshell,
  .appshell-body,
  .appshell-main,
  .page-d1,
  .well-summary,
  .tt-content {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* ── 4b. Print-only / screen-only swaps ────────────────────────────────
     `.print-only` blocks are hidden on screen by the rule at the top of this
     file and revealed here (same specificity, later in the sheet, so this
     wins). `.print-hide` is the mirror: real on screen, absent from paper —
     used where a surface has a better paper form of the same record. */
  .print-only { display: block !important; }
  .print-hide { display: none !important; }

  /* ── 5. Print masthead ─────────────────────────────────────────────────
     VOICE.md letterhead: product + surface, well, report range, printed-on.
     Rendered by each surface as `.print-only.print-masthead`; hidden on
     screen by the rule at the top of this file. */
  .print-masthead {
    display: block !important;
    margin: 0 0 10pt;
    padding: 0 0 6pt;
    border-bottom: 1.5pt solid #000000;
    break-after: avoid;
    page-break-after: avoid;
  }
  .print-masthead-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18pt;
  }
  .print-masthead-title {
    font: 700 13pt/1.2 var(--font-sans, sans-serif);
    color: #000000;
  }
  .print-masthead-well {
    margin-top: 2pt;
    font: 500 10pt/1.35 var(--font-mono, monospace);
    color: #000000;
  }
  .print-masthead-sub {
    margin-top: 4pt;
    font-size: 8.5pt;
    line-height: 1.4;
    color: #3A3A3A;
  }
  .print-masthead-meta {
    text-align: right;
    font-size: 8.5pt;
    line-height: 1.6;
    color: #3A3A3A;
    white-space: nowrap;
  }
  .print-masthead-meta b { font-weight: 600; color: #000000; }

  /* ── 6. Groups — each starts cleanly, never splits a header off its body ─
     "Each of the groups" (founder): a card is the unit of meaning. A card
     may flow across a page break when it is genuinely longer than a sheet
     (a 40-day matrix must), but its HEADER never lands alone at the foot of
     a page, and no single row is ever sliced in half. */
  .sum-card,
  .mu-card,
  .sum-kpis,
  .sum-grid,
  .sum-stack {
    background: #FFFFFF !important;
    border-color: #9A9A9A !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .sum-card,
  .mu-card {
    margin: 0 0 9pt !important;
    border: 0.75pt solid #9A9A9A !important;
    break-inside: auto;
    page-break-inside: auto;
  }
  .sum-card-head,
  .mu-card-header,
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sum-card-foot,
  .tt-foot {
    break-before: avoid;
    page-break-before: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── 7. Tables — expand fully, repeat the header, never slice a row ─────
     Every contained-scroll wrapper in the app releases its scroll on paper.
     A clipped column on a printed record is a defect: the wrapper's
     `overflow-x: auto` becomes `visible`, the frozen/sticky first column
     becomes static (sticky is meaningless without a scrollport and offsets
     the cell on paper), and cells are allowed to WRAP so a wide grid
     compresses to the sheet instead of running off it. */
  .sum-table-wrap,
  .tt-scroll,
  .prop-fam-wrap,
  .dmr-table-scroll,
  .table-scroll,
  .mu-table-scroll {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    background: #FFFFFF !important;
    font-size: 8pt;
  }
  thead { display: table-header-group !important; }
  tfoot { display: table-footer-group !important; }
  tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    background: #FFFFFF !important;
  }
  th, td {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #C4C4C4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    padding: 2.5pt 3.5pt !important;
    position: static !important;
    left: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  th {
    border-bottom: 0.75pt solid #000000 !important;
    font-size: 7pt;
    font-weight: 700;
    vertical-align: bottom;
  }
  td { border-bottom: 0.4pt solid #C4C4C4 !important; }
  /* Zebra banding is a screen scanning aid; on paper it costs toner and
     reduces contrast for the numbers sitting on it. Hairlines do the job. */
  .zebra tbody tr:nth-child(even),
  .zebra tbody tr:nth-child(odd) { background: #FFFFFF !important; }

  /* ── Responsive "card" table modes must never engage on paper ───────────
     THE TRAP: a portrait letter sheet is only ~733 CSS px wide (8.5in at
     96 px/in, less the @page margins) — landscape is ~988. So EVERY
     `max-width: 768px` / `max-width: 980px` rule in mobile.css and in the
     page sheets fires while printing, and the app's phone treatment (tables
     restacked as labelled cards, `content: attr(data-label)` prefixes,
     columns pinned to phone widths) silently lands on the printed record.
     Paper is a wide, fixed canvas, not a narrow one — undo the whole
     treatment here rather than per-rule at each call site. */
  table.tt-resp thead,
  table.mu-table thead { display: table-header-group !important; }
  table.tt-resp tr, table.mu-table tr { display: table-row !important; }
  table.tt-resp td, table.tt-resp th,
  table.mu-table td, table.mu-table th { display: table-cell !important; }
  /* The generated label prefixes: `data-mobile-label` is the app-wide table
     contract, `data-label` the ledger's; both are applied to <span>s as well
     as cells, so target the attribute, not the element. */
  td::before, th::before,
  [data-label]::before, [data-label]::after,
  [data-mobile-label]::before, [data-mobile-label]::after { content: none !important; }
  [data-hide-mobile] { display: table-cell !important; }

  /* ── 8. Pills / badges / chips — bordered text, no fill ────────────────── */
  .pill, .sum-badge, .perf-chip, .sum-status, .chip {
    background: #FFFFFF !important;
    border: 0.4pt solid #7A7A7A !important;
    border-radius: 2pt !important;
    padding: 0.5pt 2.5pt !important;
    font-size: 6.5pt !important;
    font-weight: 700 !important;
  }

  /* ── 9. Charts — print the ink ─────────────────────────────────────────
     The summary charts are token-coloured SVG/CSS, no library. Backgrounds
     are suppressed everywhere else on the sheet, so these opt back IN to
     exact colour reproduction; a chart that prints as a blank rectangle is
     worse than no chart. Each chart block stays whole on one page and sits
     directly above/below the table that carries the same numbers, so a
     mono printer still leaves the reader the data. */
  .sum-chart, .sum-cols, .sum-bars, .sum-track,
  .sum-chart *, .sum-cols *, .sum-bars *, .sum-track * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .sum-chart, .sum-cols, .sum-bars {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sum-chart-line { stroke-width: 1.2px; }

  /* ── 10. Disclosures ───────────────────────────────────────────────────
     A collapsed <details> would print as a one-line stub and silently drop
     its record (the ledger's per-ticket product lines). print.js forces
     every disclosure open on beforeprint and restores afterwards; this is
     the CSS belt to that braces for engines that expose ::details-content. */
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details::details-content { content-visibility: visible !important; }

  /* ── 11. Misc ink control ──────────────────────────────────────────────── */
  .alert, .alert-info, .sum-callout, .sum-source-note, .prop-notice {
    background: #FFFFFF !important;
    border: 0.4pt solid #9A9A9A !important;
    color: #1A1A1A !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  svg { max-width: 100%; }
  .ic { display: none !important; }
  /* The alert / source-note icons are decorative glyphs; hiding them keeps
     the copy flush left. The chart SVGs are re-enabled explicitly. */
  .sum-chart svg, .sum-chart-svg { display: block !important; }
}