/* ==========================================================================
   科学命理 Algorithmic Destiny — print / PDF report
   ==========================================================================
   Loaded with media="print", so nothing here affects the screen.

   The report is a document, not the app: the controls, the form and the saved
   list all disappear, a cover page is added, and the palette is forced to light
   (a PDF is ink on paper — the reader's dark mode must not follow it here).

   Typography follows the Noto Serif TC / Noto Sans TC pairing recommended for
   traditional-Chinese cultural content: a CJK serif for the cover and headings,
   the sans kept for tables and figures where tabular clarity matters. The stack
   resolves against fonts already installed, so the report still renders with no
   network — consistent with the rest of this local-first app.
   ========================================================================== */

@page {
  size: A4;
  margin: 15mm 14mm 18mm;

  /* Page number in the bottom margin of every page. Chromium renders @page
     margin boxes (verified), so the number is part of the document itself rather
     than the browser's optional "Headers and footers" toggle — it prints whether
     or not the reader has that option on. */
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 9pt;
    color: #5a5a63;
  }
}

/* The cover is page 1 of the document but should read as an unnumbered title
   page, so its own page suppresses the counter. */
@page :first {
  @bottom-center { content: ""; }
}

@media print {

  /* --- palette: always light, element hues kept (they carry meaning) ------ */
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f5f5f6;
    --fg: #101014;
    --fg-muted: #43434b;
    --fg-subtle: #5a5a63;
    --border: #d7d7dc;
    --border-strong: #b4b4bd;
    --ink: #101014;
    --on-ink: #ffffff;
    --accent: #9a6212;         /* imperial gold, matching the screen */
    --accent-strong: #7a5210;
    --accent-soft: #f7efdd;
    --danger: #b3261e;         /* the 需提防 heading + "!" caution badges */
    --danger-soft: #fdf0ee;
    /* verdict semaphore — 有利 red, 平和 green, 忌/不利 black (report + 大运 cards) */
    --verdict-good: #c0271f;   --verdict-good-bg: #fbe4e0;
    --verdict-normal: #15803d; --verdict-normal-bg: #dcf3e2;
    --verdict-bad: #1c1917;    --verdict-bad-bg: #ece9e4;

    /* the five-element hues used by the coloured 喜用/忌神/日主 glyphs and tables */
    --wood: #15803d;  --wood-bg: #dcf3e2;
    --fire: #c0271f;  --fire-bg: #fbe3e0;
    --earth: #a16207; --earth-bg: #f7edcf;
    --metal: #5b6b7f; --metal-bg: #e9ecf1;
    --water: #2563eb; --water-bg: #dde7fb;

    /* the self-hosted majestic faces (declared in app.css, available to print)
       lead the stack so the PDF headings match the screen */
    --serif: "Fraunces", "Noto Serif SC Head", "Noto Serif CJK SC", "Noto Serif SC",
      "Source Han Serif SC", "Songti SC", "SimSun", "Times New Roman", Georgia, serif;
    --display-vary: "opsz" 144;
  }

  /* Keep the element tints, the 日柱 band and the 命盘 shading — without them
     the tables lose the meaning the colour encodes. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body { background: #fff; }
  body {
    font-size: 10.5pt;
    line-height: 1.55;
    color: var(--fg);
  }

  /* --- strip the application chrome -------------------------------------- */
  .skip,
  .masthead,
  #form,
  .picker,
  #ai-go,
  .ai-head .actions,
  .report-actions,
  .annual-reset,
  .srv-status,
  #form-status { display: none !important; }

  .wrap { max-width: none; margin: 0; padding: 0; }
  #output { display: block !important; }

  /* --- cover page --------------------------------------------------------- */
  .print-cover {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 235mm;          /* the printable height of an A4 page */
    padding: 0 6mm;
    break-after: page;
    text-align: left;
  }
  .pc-brand {
    font: 600 10pt/1 var(--font);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin: 0 0 10mm;
  }
  .pc-logo {
    width: 20mm;
    height: 20mm;
    margin: 0 0 8mm;
  }
  .pc-title {
    font-family: var(--serif);
    font-variation-settings: var(--display-vary);
    font-size: 30pt;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin: 0 0 4mm;
    color: var(--fg);
  }
  .pc-sub {
    font: 400 11pt/1.5 var(--font);
    color: var(--fg-muted);
    margin: 0 0 14mm;
  }
  .pc-name {
    font-family: var(--serif);
    font-size: 19pt;
    font-weight: 600;
    margin: 0 0 6mm;
    padding-top: 6mm;
    border-top: 2px solid var(--fg);
  }
  .pc-meta { margin: 0 0 14mm; }
  .pc-meta > div {
    display: flex;
    gap: 6mm;
    padding: 2.2mm 0;
    border-bottom: 1px solid var(--border);
    break-inside: avoid;
  }
  .pc-meta dt {
    flex: none;
    width: 22mm;
    font-size: 9.5pt;
    color: var(--fg-subtle);
  }
  .pc-meta dd {
    margin: 0;
    font-size: 11pt;
    font-variant-numeric: tabular-nums;
  }
  .pc-meta dd.pc-pillars {
    font-family: var(--serif);
    font-size: 15pt;
    letter-spacing: 0.14em;
  }
  .pc-foot {
    margin-top: auto;
    font-size: 9pt;
    color: var(--fg-subtle);
    line-height: 1.6;
  }

  /* --- document flow ------------------------------------------------------ */
  .card {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    margin: 0 0 9mm;   /* one clear section rhythm on paper */
  }

  /* The same hierarchy as the screen, expressed in points: a section title
     clearly outranks a sub-heading, which clearly outranks body. */
  h2 {
    font-family: var(--serif);
    font-variation-settings: var(--display-vary);
    font-size: 15pt;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 4mm;
    padding-bottom: 2mm;
    border-bottom: 1.2px solid var(--fg);
    break-after: avoid;          /* a heading never ends a page */
  }
  h2 .cn { font-size: 9.5pt; font-weight: 400; color: var(--fg-subtle); }
  h3 {
    font-family: var(--serif);
    font-size: 12pt;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 2mm;
    break-after: avoid;
  }

  /* Big set pieces each start a fresh page so they are never split awkwardly. */
  #ziwei-card,
  #shensha-card,
  #report-card,
  #caveats-card { break-before: page; }

  /* 干支关系 and 大运 each open a fresh page; 流年 stays under 大运. */
  #interactions-card,
  #cycles-card { break-before: page; }
  #annual-card { break-before: avoid; }

  /* Keep atomic things whole. */
  tr, thead, .bar, .cycle, .verdict > div, .zw-palace,
  .reading section, .interactions li, .caveats li, .ss-hit { break-inside: avoid; }

  /* Whole figures stay together too — a bar chart or the verdict grid split
     across a page boundary leaves a mostly-empty page behind it. */
  .bars, .verdict, .tg-group { break-inside: avoid; }

  /* Long tables repeat their header on every page. */
  thead { display: table-header-group; }

  /* Nothing scrolls on paper. */
  .scroll-x { overflow: visible !important; }

  /* --- tables and figures ------------------------------------------------- */
  .paipan { font-size: 9.5pt; }
  .paipan .tile { box-shadow: none; }

  .zw-grid {
    min-width: 0;               /* fits the 182mm text column unaided */
    width: 100%;
    break-inside: avoid;
  }
  .zw-palace { padding: 1.5mm; }
  .zw-star { font-size: 8pt; }

  .shensha { font-size: 9pt; }
  .shensha th, .shensha td { padding: 1.2mm 2mm; }
  .ss-summary { font-size: 9pt; }

  /* Bars are drawn with borders as well as fill, so they still read if a
     printer drops backgrounds. */
  .bars .track { border: 1px solid var(--border-strong); }
  .bars .fill { border-radius: 0; }

  .basic { gap: 0 6mm; }
  .basic > div { padding: 1mm 0; break-inside: avoid; }
  .basic dt { width: 26mm; font-size: 8.5pt; }
  .basic dd { font-size: 9.5pt; white-space: pre-line; }

  .annual { font-size: 9pt; }
  .annual th, .annual td { padding: 1.2mm 2mm; }

  .cycles { break-inside: auto; }
  .cycle { border: 1px solid var(--border); }

  /* --- prose -------------------------------------------------------------- */
  .reading section { margin-bottom: 4mm; }
  .prose p { orphans: 3; widows: 3; margin: 0 0 2.5mm; max-width: none; }
  /* The screen caps prose at ~68ch for readability; on paper the column is
     already narrow, so that cap only produces ragged short lines. */
  .hint, .ss-summary, .prose p, .rb-say p { max-width: none; }
  .hint { font-size: 8.5pt; line-height: 1.5; color: var(--fg-subtle); margin-top: 2mm; }

  /* five elements read as one row rather than 3 + 2 */
  .el-cards { grid-template-columns: repeat(5, 1fr); gap: 2mm; margin-top: 3mm; }
  .el-card { padding: 2mm; break-inside: avoid; }
  .el-pct { font-size: 13pt; margin-top: 1.5mm; }

  .scores { gap: 4mm 6mm; }
  .score-basis { font-size: 8pt; }
  .pf-steps, .pf-guards { gap: 1.5mm; }
  .pf-verdict { margin-bottom: 2mm; }
  .pf-note { margin: 0 0 4mm; font-size: 9.5pt; max-width: none; }

  /* --- the layered report ------------------------------------------------- */
  /* On paper both layers are always visible — the blocks are force-opened before
     printing (see expandForPrint), since a closed <details> prints as its summary
     alone. The whole point is one document serving subject and practitioner. */
  .rb-basis > summary {
    display: block;
    list-style: none;
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--fg-subtle);
    margin-bottom: 1mm;
  }
  .rb-basis > summary::-webkit-details-marker { display: none; }
  .rb-basis {
    margin: 2.5mm 0 0;
    padding: 1mm 0 1mm 4mm;
    border-left: 1.5px solid var(--border-strong);
  }
  .rb-basis .prose p { font-size: 9pt; color: var(--fg-muted); margin: 0 0 1.5mm; }
  #report { margin-top: 5mm; }
  .rb { break-inside: avoid; margin-bottom: 7mm; }
  .rb h3 { margin-bottom: 2.5mm; padding-bottom: 1.5mm; }
  /* A block with no narrative yet is a screen affordance, not report content. */
  .rb-pending { display: none; }

  /* When the 命理依据 checkbox beside the PDF button is unticked, omit every
     reading-basis block from the document (the on-screen report keeps them). */
  body.pdf-omit-basis .rb-basis { display: none !important; }
  /* That hint only describes the 命理依据 blocks; with basis omitted, drop it too. */
  body.pdf-omit-basis #report-basis-hint { display: none !important; }

  /* --- footer ------------------------------------------------------------- */
  .colophon {
    margin-top: 6mm;
    padding-top: 3mm;
    border-top: 1px solid var(--border);
    font-size: 8.5pt;
    color: var(--fg-subtle);
    text-align: left;
  }
  .colophon a { color: inherit; text-decoration: none; }
  .colophon br { display: none; }   /* no blank line where 服务器状态 was */
  a[href]::after { content: ""; }   /* never expand URLs inline */
}