/* Print: A4, always light. Tokens only (tokens.css puts every role back to its light value under @media print).

   Two ways in:
   1. base.html links this sheet with media="print", so any screen prints cleanly: the shell goes, tables print as
      tables, cards do not split across pages.
   2. A report template links it plainly. Then the .report rules below also lay the page out as A4 sheets on screen,
      ready for Save as PDF or the PDF writer. A report sets <html data-theme="kubinu"> and never loads the theme
      script, so it is light on screen too.

   Report markup:
     <body class="report">
       <section class="report-sheet">
         <header class="report-head"><img ...logo...><div class="report-meta"><span>Lagos</span><span>3 Oct 2026</span></div></header>
         <h1 class="report-title">Outlets not reached</h1><p class="report-lead">...</p>
         <div class="report-grid"> .tile / .card / figure.report-fig / .table-wrap ... </div>
         <footer class="report-foot"><span>legal line</span><span>Sources: ...</span><span class="report-page"></span></footer>
       </section>
     </body> */

@page { size: A4; margin: 14mm 14mm 16mm; }

/* ---------- report documents: on screen and on paper ---------- */
.report { margin: 0; padding: 8mm 0; min-height: 100vh; background: var(--k-surface-high); color: var(--k-fg); font: var(--k-body-m); counter-reset: sheet; }
.report-sheet { position: relative; display: flex; flex-direction: column; gap: 5mm; width: 210mm; min-height: 297mm; margin: 0 auto 8mm; padding: 14mm 14mm 16mm;
  background: var(--k-surface-lowest); border: 1px solid var(--k-outline-variant); counter-increment: sheet; overflow: hidden; }
.report-sheet:last-child { margin-bottom: 0; }
.report-sheet > * { min-width: 0; }
@media screen and (max-width: 219mm) { .report { padding: 0; } .report-sheet { width: auto; min-height: 0; margin: 0; padding: 16px; border: 0; } .report-grid > * { grid-column: span 12 !important; } .report-foot, .report-head { flex-wrap: wrap; } }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 8mm; padding-bottom: 4mm; border-bottom: 1px solid var(--k-outline); }
.report-head img { height: 9mm; width: auto; }
.report-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1mm 5mm; font: var(--k-label-s); text-transform: uppercase; letter-spacing: .08em; color: var(--k-fg-muted); }
.report-title { font: var(--k-headline-l); letter-spacing: -0.02em; }
.report-lead { font: var(--k-body-l); color: var(--k-fg-muted); max-width: 72ch; }
.report h2 { font: var(--k-title-l); margin-top: 2mm; }
.report h3 { font: var(--k-title-m); }
.report-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4mm; }
.report-grid > * { grid-column: span 12; min-width: 0; }
.report-grid > .w-3 { grid-column: span 3; } .report-grid > .w-4 { grid-column: span 4; } .report-grid > .w-6 { grid-column: span 6; } .report-grid > .w-8 { grid-column: span 8; }
.report .tile { animation: none; padding: 4mm; }
.report .tile .big { font: var(--k-number-l); }
.report-fig { margin: 0; display: grid; gap: 2mm; }
.report-fig svg, .report-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--k-outline-variant); border-radius: var(--k-radius-sm); }
.report-fig figcaption { font: var(--k-body-s); color: var(--k-fg-muted); }
.report-note { padding: 3mm 4mm; border-left: 3px solid var(--k-outline); background: var(--k-surface-high); font: var(--k-body-s); }
.report-fill { flex: 1; }
.report-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; padding-top: 3mm; border-top: 1px solid var(--k-outline-variant); font: var(--k-body-s); color: var(--k-fg-muted); }
.report-page::after { content: counter(sheet); font-family: var(--k-font-mono); }
.report .tbl { font: var(--k-body-s); }
.report .tbl th, .report .tbl td { padding: 2mm 3mm; }

/* ---------- paper ---------- */
@media print {
  html, body { background: var(--k-bg); color: var(--k-fg); }
  body { min-height: 0; font: var(--k-body-m); }
  * { animation: none !important; transition: none !important; }

  /* the shell stays behind */
  .rail, .topbar, .footer, .skip, .toasts, dialog, .menu, .theme-toggle, .filters, .pages, .tabs, .banner--sticky, .banner-action,
  .page-head .actions, .tbl td[data-label=""], .tbl th button .ico, [data-no-print] { display: none !important; }
  .shell, .main { display: block; min-height: 0; }
  .page { max-width: none; padding: 0; }
  .banners { margin-bottom: 4mm; gap: 2mm; }
  .banner--pinned { position: static; }
  .banner { border: 1px solid var(--k-outline); }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, .page-head { break-after: avoid; }
  .card, .tile, .banner, .limits, .legend-box, figure, svg, tr { break-inside: avoid; }
  .card, .tile, .table-wrap, .limits { border-color: var(--k-outline); }
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4mm; }
  .tile { grid-column: span var(--ce, var(--cm, var(--c))); grid-row: auto; padding: 4mm; }
  a.tile:hover { transform: none; }
  .table-wrap { overflow: visible; }

  /* a sheet of paper is narrower than 840 px, but a printed table is still a table */
  .tbl { display: table; font: var(--k-body-s); }
  .tbl thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tbl tbody { display: table-row-group; }
  .tbl tfoot { display: table-footer-group; }
  .tbl tr { display: table-row; padding: 0; border: 0; }
  .tbl th, .tbl td { display: table-cell; padding: 2mm 3mm; border-top: 1px solid var(--k-outline-variant); text-align: left; }
  .tbl td.title { display: table-cell; }
  .tbl td::before { content: none; }
  .tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
  .tbl a.row-link { min-height: 0; }

  /* reports: one sheet per page, edge to edge inside the page margins */
  .report { background: var(--k-bg); padding: 0; min-height: 0; }
  .report-sheet { width: auto; min-height: 0; height: 267mm; margin: 0; padding: 0; border: 0; break-after: page; }
  .report-sheet:last-child { break-after: auto; }
}