/* ==========================================================================
   科学命理 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. NOTE: Chromium's own print
     engine does NOT render @page margin boxes — the report is therefore paginated
     by paged.js (vendored, loaded for the PDF button, see generateReportPdf), which
     DOES implement @page margin boxes, so this number prints baked into the document
     regardless of the browser's optional "Headers and footers" toggle. */
  @bottom-center {
    content: "— " counter(page) " —";
    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 -------------------------------------- */
  /* Every interactive surface disappears on paper — for BOTH the 命理 report
     (#form) and the 占测 report (.mainnav + #zhance-form), so a plain Ctrl+P from
     either view yields a clean document, not the input screen. */
  .skip,
  .masthead,
  .mainnav,
  .nav-menu,
  #form,
  #zhance-form,
  .picker,
  #ai-go,
  .ai-head .actions,
  .report-actions,
  .annual-reset,
  .srv-status,
  .chat-launcher,
  .chat-panel,
  #ai-verify,
  #form-status,
  #zhance-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);
  }
  /* The question block — set below the cast metadata as its own labelled panel so
     a reader instantly knows this is WHAT was asked. A gold kicker labels it, a
     left accent rule and tinted card lift it off the page, and the question itself
     is large serif (the loudest thing after the cover title). */
  .pc-question {
    margin: 2mm 0 14mm;
    padding: 5mm 6mm;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 3mm;
    background: var(--accent-soft);
    break-inside: avoid;
  }
  .pc-question-label {
    margin: 0 0 2.5mm;
    font: 700 8.5pt/1.2 var(--font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }
  .pc-question-text {
    margin: 0;
    font-family: var(--serif);
    font-size: 18pt;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fg);
    text-wrap: pretty;
  }
  /* An unanswered/empty question would leave a bare labelled card — hide it. */
  .pc-question:has(.pc-question-text:empty) { display: none; }

  .pc-meta { margin: 0 0 10mm; }
  .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.
     八字命盘 (the four-pillar 排盘) is a set piece too: it opens its own page so it
     never trails cramped under 基本资料, and stays whole on it. */
  #pillars-card,
  #ziwei-card,
  #shensha-card,
  #report-card,
  #caveats-card { break-before: page; }
  #pillars-card { break-inside: avoid; }

  /* 干支关系 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; }

  /* 基本资料 info tiles — the screen renders each as a bordered/tinted card
     (app.css `.basic > div`). The old print rule zeroed the horizontal padding
     (`1mm 0`), so the label + value sat flush against the card frame. Give the
     tile real interior breathing room and a fixed 2-column grid so the pairs
     align in tidy rows on paper. */
  .basic { grid-template-columns: repeat(2, 1fr); gap: 2.6mm; }
  .basic > div {
    gap: 1mm;
    padding: 2.6mm 3.4mm;
    border: 1px solid var(--border);
    border-radius: 2mm;
    background: var(--surface-2);
    break-inside: avoid;
  }
  .basic dt { width: auto; font-size: 8pt; letter-spacing: .04em; color: var(--fg-subtle); }
  .basic dd { font-size: 10pt; font-weight: 600; line-height: 1.35; 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); }

  /* 人生大事 · 大运主题 strip — pin to an even 2-column grid at A4 width so the
     decade cards sit in tidy aligned rows (no ragged flex gaps), each card whole
     across a page break, with its theme chips wrapping inside the cell. */
  .le-cycles { grid-template-columns: repeat(2, 1fr); gap: 2.6mm; margin-bottom: 5mm; }
  .le-cyc {
    padding: 2mm 2.8mm; gap: 1.4mm 2mm; border-radius: 2mm;
    break-inside: avoid; font-size: 9pt;
  }
  .le-cyc-age, .le-cyc-gz { font-size: 9.5pt; }
  .le-chip { padding: 0.4mm 2.2mm; font-size: 7.8pt; }

  /* --- 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 the basis block becomes a compact review panel so the PDF stays
     readable without losing the evidence structure. */
  .rb-basis {
    margin: 2.5mm 0 0;
    padding: 3.5mm;
    border: 1px solid var(--border);
    border-radius: 3mm;
    background: var(--surface-2);
    box-shadow: none;
  }
  /* on-screen-only report chrome never prints; the 精简版 PDF re-shows its summary card */
  .report-view { display: none !important; }
  #report-light { display: none !important; }
  .pdf-light #report-light { display: block !important; }
  /* 精简版 PDF — cover, curated chart cards, then the 老师解读摘要 on a fresh page */
  .pdf-light .card { break-before: auto; margin-top: 4mm; }
  .pdf-light #report-light { break-before: page; margin-top: 0; }
  .lite-card h2 { break-after: avoid; }
  .lite-row { display: grid; grid-template-columns: 16mm 1fr; gap: 3mm; padding: 1.8mm 0; border-top: 0.2mm solid var(--border); break-inside: avoid; }
  .lite-row:first-of-type { border-top: 0; }
  .lite-k { font-weight: 700; font-size: 10pt; }
  .lite-v { margin: 0; font-size: 10pt; line-height: 1.5; }
  .rb-basis-head {
    display: grid;
    gap: 1.2mm;
    margin-bottom: 2.5mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid var(--border);
  }
  .rb-basis-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 0.6mm 2.4mm;
    border-radius: 99px;
    font-size: 7.8pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
  }
  .rb-basis-head h4 { margin: 0; font-size: 11pt; line-height: 1.25; color: var(--fg); }
  .rb-basis-intro { margin: 0; font-size: 8.8pt; line-height: 1.55; color: var(--fg-muted); max-width: none; }
  .rb-basis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm; }
  .rb-basis-card {
    margin: 0;
    padding: 2.5mm 2.8mm;
    border-radius: 2.5mm;
    border: 1px solid var(--border);
    background: var(--surface);
    break-inside: avoid;
  }
  .rb-basis-card::before { width: 1.2mm; }
  .rb-basis-idx {
    display: inline-flex;
    min-width: 6mm;
    height: 4mm;
    margin-bottom: 1.2mm;
    padding: 0 1.4mm;
    border-radius: 99px;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
  }
  .rb-basis-card p { font-size: 9pt; color: var(--fg-muted); margin: 0; line-height: 1.55; }
  #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; }

  /* --- 占测 report — the cast + the interpretation as one clean document --- */
  #zhance-output { display: block !important; }

  /* 卦象 stays whole; the 占断解读 opens on a fresh page after it. */
  #zhance-report-card { break-before: page; }
  .gua-pair, .yao-ladder, .ly-chart, .ly-row,
  .hexchips, .hexchips-sm, .zverdict, .kbz { break-inside: avoid; }

  /* the 本卦/变卦 hero keeps its light panel (the colour carries meaning) but
     sheds the screen shadow and tightens to the paper rhythm. */
  .gua-pair { box-shadow: none; margin: 3mm 0 5mm; padding: 4mm 3mm; }
  .gua-pair-div { background: var(--border-strong); }

  /* the six-yao list — solid rows with a visible border in case the printer
     drops the fill; the 世 row keeps its gold tint. */
  .ly-row { box-shadow: none; border: 1px solid var(--border); }

  /* the 占断 verdict reads as a labelled block; the interpretation as prose.
     The ☯ watermark is a screen flourish — no ink for it on paper. */
  .zverdict { box-shadow: none; }
  /* the 占断解读 prints as a clean, borderless document — no wrapping box/card on any
     page (the on-screen panel border, radius, tint and shadow are screen-only). */
  #zhance-report { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  #zhance-report::before, #zhance-report::after { display: none !important; }
  #zhance-report p { font-size: 10.5pt; line-height: 1.6; max-width: none; }
  #zhance-report ul, #zhance-report ol, #zhance-report blockquote p { max-width: none; }

  /* --- 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 */
}