/* studio-report.css — the Climate Design Studio report on A4 (RPRT-01).
 *
 * WHY THIS IS ITS OWN FILE AND NOT A BLOCK IN main.css.
 *
 * `@page` CANNOT be scoped. There is no selector that confines it to the report: written into
 * main.css — which shell() links from EVERY page of the site — `@page{size:A4}` forces A4/14mm on
 * every print of every marketing page, the free climate report included, overriding the reader's
 * own paper size. A US prospect printing a product page on US Letter got a re-laid-out sheet
 * because of a studio rule. The same went for the bare `nav` hide, which removed
 * render.js's `<nav class="post-toc">` article table-of-contents from every printed blog post.
 *
 * A comment claiming "every selector is scoped under .rpt" cannot make that true of an at-rule
 * that has no selector. Loading this file ONLY on the studio pages is what actually scopes it —
 * so the page box now applies where it is meant to and nowhere else.
 *
 * LOADED BY: render.js's studioShell (`extraCss`), i.e. /climate-studio and /studio/runs/*.
 * If this file stops being linked, the report prints unstyled — test/studio-report.test.mjs pins
 * the link, in both directions, against the rendered shell.
 *
 * The class contract this styles is shared with server/lib/studio-report.js: it may style EXACTLY
 * the classes reportBody() emits. A selector for a class the markup never emits is a rule that
 * styles nothing while every CSS grep still passes green — asserted against RENDERED markup in
 * test/studio-report.test.mjs, never against this file's text.
 *
 * main.css's `.cr-report` print block (the free climate report's) is REUSED for its idioms (the
 * display:none hide-list, break-inside:avoid + box-shadow:none, background:#fff) and REJECTED for
 * its mechanism (its `body` print-color-adjust rule — see below).
 */
/* studio-report print — start */
@media print{
  /* Now genuinely scoped: this file is linked only from the studio pages. */
  @page { size: A4; margin: 14mm; }
  /* `nav` is deliberately NOT here: the report emits none, and the one nav this would have reached
     is an article's own table of contents on a page this stylesheet no longer touches. */
  header,footer,.snav,.no-print{display:none!important}
  /* The on-screen run chrome — the "Your run is complete" hero, the status card and the
     All-runs / New-run buttons — is `renderStudioRun`'s `<section class="page-header">`, emitted
     ABOVE `.rpt`. It is interactive screen UI (buttons printed on a PDF), and the report's real
     cover is `.rpt`'s first `.rpt-page`. This file is linked only by studioShell, so hiding
     `.page-header` here reaches the studio pages ONLY — a marketing page keeps its own header. */
  .page-header{display:none!important}
  .rpt{background:#fff;padding:0}

  /* Chrome does NOT print the page background at all, and on the root the property applies only to
     descendants — which is why main.css's `body` rule is the wrong mechanism, not merely a
     redundant one. Put it on the elements that actually CARRY background-color.
     This is NOT what saves the heatmap: that is an <img>, and images print regardless of the
     "Background graphics" toggle; SVG fill/stroke is foreground content and prints too. What IS
     stripped is CSS background-color, so this list is EXACTLY the elements that have one:
       .legend i  the zone/series swatches — an inline background per entry, and the only key that
                  decodes four heatmaps. Without `exact` the map prints in colour and its key blank.
       .kpi       the KPI cards (their background comes from .cr-card; .kpi is the contract hook)
       .cr-card   background:#fff
       .cr-chart  background:var(--dg-forest) — white-on-dark by design, so without `exact` it
                  prints white-on-white
     NOT the table: `.cr-table th` sets colour, padding and a border and NO background, and nothing
     in main.css stripes rows — `.cr-table thead th` and `tbody tr:nth-child(even)` were on this
     list, matched 33 and 43 real elements between them, and preserved nothing on either. If
     striping is ever added to main.css, add the selector back HERE, in the same change.
     It is a REQUEST, not a guarantee — the user's own print settings win — so colour is never the
     only channel: every legend entry carries a text label and every KPI figure is text. */
  .rpt .legend i,.rpt .kpi,.rpt .cr-card,.rpt .cr-chart{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Pagination — the atomic unit is the CARD, never the whole section.
     `.rpt section{break-inside:avoid}` was the 24-page defect: a numbered section holds a chart
     card AND its data table (B.2-B.7) or four heatmaps (B.9), so any section taller than the
     space left on the current sheet jumped WHOLE to a fresh one — leaving the previous sheet
     60-80 % empty. Sections must be allowed to break; what must stay together is each chart, card
     and table INSIDE them. A heading still clings to the block it introduces (`break-after:avoid`),
     so a caption is never orphaned at the foot of a page from the chart it labels. */
  .rpt h2,.rpt h3,.rpt h4{break-after:avoid}
  .rpt .cr-chart,.rpt .cr-card,.rpt .cr-table{break-inside:avoid;box-shadow:none}

  /* Compact the data tables for paper. On screen `.dt th,.dt td` (main.css) pad 14px/18px — lavish
     for a 12-row monthly table, and the reason a chart card (chart + its 12-row table) overran a
     single A4 sheet: the table could not sit under the chart, so `break-inside:avoid` pushed it to
     the next sheet and the dark `.cr-chart` background then filled the empty remainder (the "giant
     dark void"). Tightened here, chart + table fit one sheet, so the dark card stays whole and
     fully backed by content. Scoped under `.rpt` so it never reaches a marketing-page table.
     (These override `.dt` because they are more specific — two classes to `.dt`'s one — and load
     after main.css.) */
  .rpt .cr-table th,.rpt .cr-table td{padding:5px 12px;font-size:12px;line-height:1.35}
  .rpt .cr-table h3{margin:0 0 8px}
  .rpt .cr-chart{padding:16px 18px}

  /* The click-to-sort header affordance (⇅) is injected into every 3+-row table by
     public/assets/js/dg-tables.js — screen-only UI that has no meaning on paper. `.dt-arrow` is
     that glyph's carrier; hide it in print. (It is absent from the server-rendered report body and
     appears only after that script runs, so it is verified in the printed DOM, not in the markup.) */
  .rpt .dt-arrow{display:none!important}

  /* The cover breaks AFTER itself, so the results start on a fresh sheet.
     Section C also carries `.rpt-page` and is the LAST element in the report: an unqualified
     break-after would give every printed report a trailing blank sheet. What C wants is a break
     BEFORE it — the same "own sheet" outcome, no blank page. */
  .rpt .rpt-page{break-after:page}
  .rpt > .rpt-page:last-child{break-after:auto;break-before:page}

  /* The heatmap is one pixel per hour, scaled up: print it crisp, not as a watercolour. */
  .rpt .hm{width:100%;height:auto;display:block;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}

  /* Suppress UA URL expansion inside the report. */
  .rpt a[href]::after{content:none}
}
/* studio-report print — end */