/* ============================================================
   print.css — the statement, in both of its lifetimes.
   On screen it lives in #pdfStage (laid out for real and parked off-viewport so
   it can be rasterised for the downloaded PDF) and in #printArea (hidden until
   printing). Both renderers receive the same fixed A4 pages that insights.js
   paginated, which is why this file has a page height in it at all: the A4
   content box under the @page margin below is 210-24 x 297-28 mm, i.e.
   703 x 1016 px at 96dpi.
   Two rules of thumb hold everything in here:
     · tables and simple blocks, never CSS grid — the raster paths lay grid out
       unreliably, and the downloaded PDF is the one users call "the PDF";
     · spacing between blocks is padding, never margin — the paginator measures
       offsetHeight, and offsetHeight ignores margins.
   Deliberately dependency-free, so it works offline and over file://.
   ============================================================ */
@page{ size:A4 portrait; margin:14mm 12mm }

@media print{
  html,body{ background:#fff !important; height:auto !important }
  body > *:not(#printArea){ display:none !important }
  #printArea{ display:block !important }
  /* The sheet keeps the height it was paginated against — that is what pins the
     footer to the bottom edge — while its width follows the paper instead of the
     pixel figure, so a browser that rounds mm to px a different way cannot push
     a page sideways. Overflow stays visible: if a block ever overshoots its
     page, spilling beats the reader never seeing the rest of it.             */
  #printArea .p-page{ width:100%; overflow:visible;
    break-after:page; page-break-after:always; break-inside:avoid; page-break-inside:avoid }
  #printArea .p-page:last-child{ break-after:auto; page-break-after:auto }
}

#printArea, #pdfStage{
  color:#111827;
  font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue','Microsoft YaHei','PingFang SC',sans-serif;
  font-size:10.5px;line-height:1.45;background:#fff;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
/* The measuring bench. Same width as a page, so a height taken here is the
   height the page will have. */
#pdfStage .p-measure{ width:100%;background:#fff }
/* The foot is pinned to the bottom edge in a sheet, which would make it height
   nothing while being measured. Put back in flow for that moment and it reports
   the space it will occupy. */
#pdfStage .p-measure .p-foot{ position:static }

/* ---- one sheet --------------------------------------------------------- */
.p-page{ position:relative;width:703px;height:1016px;overflow:hidden;background:#fff;color:#111827 }
.p-blk{ padding-bottom:12px }

/* ---- letterhead -------------------------------------------------------- */
.p-head{ width:100%;border-collapse:collapse }
.p-brandCell{ text-align:left;vertical-align:top }
.p-brand{ border-collapse:collapse }
.p-logoCell{ width:46px;vertical-align:top;padding-right:12px }
.p-logo{ width:42px;height:42px;border-radius:9px;background:#0f172a;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.5px }
.p-title{ font-size:17px;font-weight:700;color:#0f172a;line-height:1.2 }
.p-sub{ font-size:8.5px;color:#64748b;letter-spacing:1.6px;text-transform:uppercase;margin-top:3px }
.p-doctype{ text-align:right;vertical-align:top;white-space:nowrap }
.p-doctype-en{ font-size:12.5px;font-weight:700;letter-spacing:2.2px;color:#0f172a }
/* .p-doctype-cn went with the second line of the letterhead: one document, one
   language, so there is no longer a translation to sit underneath the title. */
.p-rule{ height:3px;margin-top:12px;
  background:linear-gradient(90deg,#0f172a 0%,#0f172a 62%,#0d9488 62%,#0d9488 100%) }

/* Running head on every page after the first: the second page of a statement is
   the one that gets detached, photocopied and asked about. */
.p-run{ width:100%;border-collapse:collapse }
.p-runL{ font-size:9.5px;color:#475569;letter-spacing:.3px;text-align:left;padding-bottom:3px }
.p-runR{ font-size:9.5px;color:#475569;text-align:right;padding-bottom:3px }
.p-ruleThin{ height:2px;margin-top:2px;
  background:linear-gradient(90deg,#0f172a 0%,#0f172a 62%,#0d9488 62%,#0d9488 100%) }

/* ---- meta strip + headline figures --------------------------------------
   Both are tables rather than CSS grid on purpose: this is the one screen the
   user turns into an image, and grid is the layout html2canvas handles worst.  */
.p-meta{ width:100%;border-collapse:collapse;background:#f8fafc;border:1px solid #e2e8f0 }
.p-meta td{ width:25%;padding:9px 11px;border-left:1px solid #e2e8f0;vertical-align:top }
.p-meta td:first-child{ border-left:0 }
.p-meta span{ display:block;font-size:8px;letter-spacing:.7px;color:#64748b;text-transform:uppercase;margin-bottom:4px }
.p-meta b{ font-size:10.5px;color:#0f172a;font-weight:600 }

.p-kpi{ width:100%;border-collapse:collapse }
.p-kpi td{ width:25%;padding:8px 10px;border:1px solid #e2e8f0;background:#fff;vertical-align:top }
.p-kpi tr:first-child td{ border-top:2px solid #0f172a }
.p-kpi span{ display:block;font-size:8px;letter-spacing:.6px;color:#64748b;text-transform:uppercase;margin-bottom:5px }
.p-kpi b{ font-size:12px;color:#0f172a;font-weight:700;font-variant-numeric:tabular-nums }
/* Not nowrap: a tile that must show "RM 1,200,000.00 · 12 moves" would otherwise
   push past its quarter-width cell. It breaks at the separator, never inside a
   figure, because the separator is the only space in the string. */
.p-kpi b{ white-space:normal;overflow-wrap:normal }
.p-kpi b em{ font-size:9.5px;font-weight:500;font-style:normal;color:#94a3b8 }
.p-kpi .in{ color:#047857 } .p-kpi .out{ color:#b91c1c } .p-kpi .tr{ color:#0e7490 }

/* The filter banner: a statement produced under a filter has to say so, or the
   reader assumes the ledger they are holding is the whole ledger. */
.p-flag{ border:1px solid #f0c274;border-left:4px solid #f59e0b;background:#fffbeb;padding:8px 10px }
.p-flagK{ font-size:8.5px;font-weight:700;letter-spacing:.8px;color:#92400e;text-transform:uppercase;margin-right:8px }
.p-flagV{ font-size:10px;color:#78350f }
.p-flagN{ display:block;font-size:8.5px;color:#a16207;margin-top:3px }

.p-h2{ font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#0f172a;
  margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #cbd5e1 }
.p-cap{ font-size:8.5px;line-height:1.6;color:#64748b;margin:6px 0 0 }
.p-none{ border:1px dashed #cbd5e1;color:#94a3b8;font-size:9.5px;text-align:center;padding:12px }

/* ---- tables ------------------------------------------------------------ */
.p-table{ width:100%;border-collapse:collapse;font-size:10px }
.p-table thead{ display:table-header-group }
.p-table tr{ break-inside:avoid; page-break-inside:avoid }
.p-table th{ background:#0f172a;color:#fff;text-align:left;padding:6px 7px;font-weight:600;
  font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;vertical-align:top }
.p-table td{ padding:5px 7px;border-bottom:1px solid #e8edf3;vertical-align:top }
.p-table tbody tr:nth-child(even){ background:#f8fafc }
.p-table .in{ color:#047857 }
.p-table .out{ color:#b91c1c }
.p-table .tr{ color:#0e7490 }
.p-table .c-date{ white-space:nowrap;color:#334155 }
.p-table .c-type,.p-table .c-card{ color:#475569 }
.p-table .c-amt,.p-table .c-bal,.p-table .c-num{ text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap }
.p-table .c-amt{ font-weight:600 }
.p-table .c-bal{ color:#475569 }
.p-table .c-empty{ text-align:center;color:#94a3b8;padding:16px }
.p-table .c-desc{ word-break:break-word }

/* The ledger is fixed-layout: the paginator measures a row once and then spends
   that height wherever the row lands, which only holds if the columns cannot
   resize themselves around whichever rows share a page with them.            */
.p-ledger{ table-layout:fixed }
.p-ledger .w-date{ width:72px } .p-ledger .w-type{ width:98px }
.p-ledger .w-card{ width:84px } .p-ledger .w-amt{ width:94px } .p-ledger .w-bal{ width:96px }
.p-ledger .c-date,.p-ledger .c-type,.p-ledger .c-card{ font-size:9.5px }
.p-ledger .c-amt,.p-ledger .c-bal{ font-size:9.5px }

/* Was the row typed by a person, or written by a standing instruction? */
.c-src{ display:inline-block;font-style:normal;font-size:8px;color:#475569;background:#f1f5f9;
  border:1px solid #e2e8f0;border-radius:2px;padding:0 4px;margin-left:6px;white-space:nowrap }

.p-band td{ background:#eef2f7;border-top:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;padding:5px 7px }
.p-band b{ font-size:10px;color:#0f172a;letter-spacing:.4px }
.p-bandN{ font-size:8.5px;color:#64748b;margin-left:8px }
.p-bandR{ float:right;font-size:9px;color:#334155;font-variant-numeric:tabular-nums }
.p-total td{ border-top:2px solid #0f172a;background:#f8fafc;font-weight:700;font-size:9.5px;padding:6px 7px }
.p-total2 td{ border-top:1px solid #cbd5e1;font-weight:600;color:#475569;background:#fff }

/* The appendix tables carry more columns, so they run one size down. */
.p-cards,.p-rule-t{ font-size:9px }
.p-cards th,.p-cards td,.p-rule-t th,.p-rule-t td{ padding:5px 6px }
.p-cards th,.p-rule-t th{ font-size:8px;letter-spacing:.4px }

/* ---- notes and sign-off ------------------------------------------------ */
.p-notes{ margin:0;padding-left:16px;font-size:9px;line-height:1.7;color:#475569 }
.p-notes li{ margin-bottom:4px }
.p-sign{ border:1px solid #e2e8f0;padding:10px 12px 12px }
.p-sign > div{ display:inline-block;width:30%;margin-right:3%;vertical-align:top }
.p-sign > div:last-child{ margin-right:0 }
.p-sign span{ display:block;font-size:8px;letter-spacing:.7px;text-transform:uppercase;color:#64748b;margin-bottom:18px }
.p-sign i{ display:block;height:1px;border-bottom:1px solid #94a3b8 }

/* ---- foot, pinned to the bottom edge of the sheet ----------------------
   Absolutely positioned, with floats inside, rather than flow content: the two
   renderers agree about absolutes and floats more often than they agree about
   flexbox, and the paginator subtracts this block's measured height from the
   page budget, so nothing can ever be laid underneath it.                    */
.p-foot{ position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #cbd5e1;
  padding-top:6px;font-size:8px;line-height:1.6;color:#64748b }
.p-foot .fl{ float:left;max-width:72% }
.p-foot .fr{ float:right;text-align:right;font-size:9px;font-weight:700;color:#0f172a;letter-spacing:.4px }
.p-foot::after{ content:'';display:table;clear:both }
/* ---- one language per sheet ----------------------------------------------
   Every .p-page carries lang, and the typography follows it. The tracking and
   the uppercasing above are decisions made about Latin capitals: a Chinese
   statement set with 1.4px between its characters reads as a row of unrelated
   glyphs instead of a phrase, and text-transform cannot capitalise a Han
   character anyway — it only costs the reader space.                          */
[lang="zh"] .p-h2{ letter-spacing:.5px }
[lang="zh"] .p-sub{ letter-spacing:.6px }
/* One line, one language: the doctype used to be two lines, an English one and a
   Chinese one under it. The Chinese title needs a slightly larger face at a
   fraction of the tracking, because it is read as a phrase, not as letters. */
[lang="zh"] .p-doctype-en{ font-size:14px; letter-spacing:.5px }
[lang="zh"] .p-flagK{ letter-spacing:.3px }
[lang="zh"] .p-kpi span{ letter-spacing:.2px }
[lang="zh"] .p-sign span{ letter-spacing:.2px }
[lang="zh"] .p-runL{ letter-spacing:0 }

/* Degenerate case — no measuring bench, so no pagination. Let the sheet run. */
.p-page.no-split{ height:auto;overflow:visible }