/*
 * The printed report. Loaded with media="print" only, so nothing here can
 * touch the page on screen.
 *
 * Before this file the page printed as thirty US-letter pages of website:
 * section headings alone at the foot of a page with their content overleaf,
 * half-empty pages, the navigation and the forms, and every <details> shut —
 * so the source texts, the one thing the site exists to show, did not print.
 * (Opening them is done by script in layout.php; CSS cannot open a <details>,
 * which was checked rather than assumed -- see the note by the details rules.)
 */

/* A4, because the readers are in Malaysia and Singapore. Page numbers in the
   margin boxes; the cover carries none. Browsers without margin-box support
   simply print without numbers. */
@page {
  size: A4;
  margin: 18mm 16mm 20mm;
  @bottom-left  { content: "mingpan.co"; font: 8pt system-ui, sans-serif; color: #777; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt system-ui, sans-serif; color: #777; }
}
@page :first {
  @bottom-left  { content: none; }
  @bottom-right { content: none; }
}

/* Light, whatever the screen theme was: dark-mode text on white paper is
   invisible, and printers drop backgrounds by default. */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] { color-scheme: light; }
html, body, .page, .page-wrapper, .page-body {
  background: #fff !important;
  color: #111 !important;
}
.text-secondary, .text-muted, .report-dim { color: #555 !important; }
a { color: inherit !important; text-decoration: none !important; }

/* Website furniture off. `form[class]` and not just `form`: Tabler's .d-flex
   and .card are !important too, and an element selector loses to a class at
   equal importance -- the first printout had the birth form above the cover. */
.navbar, header.navbar, .footer, footer, form, form[class], .btn, .skip-link,
#say, .report-tools, .d-print-none, .birth-form-wrap { display: none !important; }

/* On a page that carries a report, the report's cover replaces the page's own
   heading ("BaZi Calculator and Analysis" is a web page's title, not a report's). */
article:has(.report-cover) > header.d-flex { display: none !important; }

/* Full width: the screen layout's gutters are wasted on paper. */
.container, .container-xl, .container-lg, .page-body, .page-wrapper, main {
  max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
  margin: 0 !important;
}

/* Cards read as sections, not floating tiles. And they MAY break across pages:
   Tabler's own print rules set .card { break-inside: avoid }, which pushed any
   card that did not fit the rest of a page on to the next one -- two pages of
   this report carried a single stray line each because of it. */
.card { box-shadow: none !important; border: 1px solid #d8d8d8 !important; break-inside: auto !important; }

/* Grids of long boxes print as one column. Two columns at A4 width are narrow
   for paragraphs of reading, and Chrome fragments a grid row of long items badly:
   one Zi Wei page printed as nothing but the empty lower edges of two boxes whose
   content had ended on the page before. Grids of short facts (dates, pillars)
   are left as grids -- they never cross a page. */
.datagrid:has(> .rounded-md, > .card, > .rounded-3) { display: block; }
.datagrid:has(> .rounded-md, > .card, > .rounded-3) > * + * { margin-top: 4mm; }

/* Pagination. Each of the four report layers starts a page; a heading never
   ends one; small units never split. Whole cards are NOT kept together: a
   long one would be pushed to the next page and leave most of a page blank,
   which is the fault this file exists to fix. */
.result-section { break-before: page; border-top: 0 !important; margin-top: 0 !important; }
h1, h2, h3, h4, .subheader, .fw-medium, .fw-semibold, dt { break-after: avoid; }
li, tr, .alert, blockquote, .report-findings tr, svg { break-inside: avoid; }
p { orphans: 3; widows: 3; }

/* Shut <details> are opened for print by the beforeprint script in layout.php.
   There is no CSS way: ::details-content was tried and Chromium 148 will not
   show a closed <details>' body from author styles, in print or on screen --
   checked on a bare page. So a print with scripts off prints them shut. */

/* Opened <details> print as labelled content, not as a disclosure widget. */
details > summary { list-style: none; font-weight: 600; color: #333 !important; }
details > summary::-webkit-details-marker { display: none; }

/* Band chips and badges keep their colour: they carry meaning. */
.badge, [class*="bg-"], [class*="text-emerald"], [class*="text-destructive"], [class*="text-amber"] {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---- cover --------------------------------------------------------------- */
.report-cover { break-after: page; padding-top: 30mm; }
.report-kicker { font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: #777 !important; margin: 0 0 6mm; }
.report-title { font-size: 26pt; font-weight: 700; line-height: 1.15; margin: 0 0 4mm; }
.report-for { font-size: 13pt; margin: 0 0 14mm; }
.report-pillars { display: flex; gap: 10mm; margin: 12mm 0 14mm; }
.report-pillars > div { text-align: center; min-width: 22mm; }
.report-label { font-size: 9pt; color: #666 !important; margin: 0 0 2mm; }
.report-big { font-size: 30pt; line-height: 1.1; margin: 0; }
.report-sub { font-size: 11pt; margin: 2mm 0 0; }
.report-facts { display: grid; grid-template-columns: 38mm 1fr; gap: 2mm 6mm; font-size: 11pt; margin: 0 0 14mm; }
.report-facts dt { color: #666 !important; font-weight: 400; }
.report-facts dd { margin: 0; }
.report-prepared { font-size: 10pt; color: #666 !important; margin: 0 0 4mm; }
.report-note { font-size: 9pt; color: #555 !important; line-height: 1.5; max-width: 150mm; }

/* ---- executive summary --------------------------------------------------- */
.report-summary { break-after: page; }
.report-h2 { font-size: 18pt; font-weight: 700; margin: 0 0 6mm; }
.report-findings { width: 100%; border-collapse: collapse; font-size: 10.5pt; margin: 0 0 6mm; }
.report-findings th { width: 34mm; text-align: left; vertical-align: top; font-weight: 600; padding: 2.5mm 4mm 2.5mm 0; }
.report-findings td { vertical-align: top; padding: 2.5mm 0; line-height: 1.5; }
.report-findings tr + tr th, .report-findings tr + tr td { border-top: 1px solid #e3e3e3; }
.report-quote { font-size: 11pt; }
.report-quote-en { font-size: 9.5pt; color: #444 !important; font-style: italic; }