/* report.css - the A4 "Movement Report" built by report.js.
   Used two ways: printed (Ctrl+P), and rendered off-screen into a PDF for the direct download.
   Hidden on screen. Fixed print colours so it looks the same from light or dark theme. */
.print-report { display: none; }

@page {
  size: A4;
  margin: 14mm 12mm 15mm;
  @bottom-left { content: "Movement Tracker - Movement Report"; font: 8px "Plus Jakarta Sans", "Segoe UI", sans-serif; color: #94a3b8; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8px "Plus Jakarta Sans", "Segoe UI", sans-serif; color: #94a3b8; }
}

@media print {
  html, body { background: #fff !important; min-width: 0 !important; height: auto !important; display: block !important; }
  body > *:not(.print-report) { display: none !important; }
  .print-report { display: block; }
  .print-report, .print-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
}

/* PDF download: a detached copy of the report laid out at the A4 content width (210 - 2 x 12 mm = 186 mm = 703 px);
   html2pdf positions it off-screen itself while rendering */
.print-report.rp-pdf { display: block; width: 703px; background: #fff; }
/* html2pdf centres its render container with margin:auto, which offsets the capture and crops one side; pin it left */
.html2pdf__overlay .html2pdf__container { margin: 0 !important; left: 0 !important; right: auto !important; }

.print-report { color: #0f172a; font: 9.5px/1.45 "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; }

/* header */
.rp-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 2px solid #0f172a; }
.rp-brand { display: flex; align-items: center; gap: 9px; }
.rp-brand img { width: 30px; height: 30px; }
.rp-brand b { display: block; font: 700 17px/1.1 "Playfair Display", Georgia, serif; letter-spacing: -.01em; }
.rp-brand span { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.rp-org { height: 24px; width: auto; }

/* identity */
.rp-id { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 18px; align-items: end; margin: 12px 0 12px; }
.rp-k { display: block; font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }
.rp-person h1 { margin: 2px 0 1px; font: 700 22px/1.1 "Playfair Display", Georgia, serif; color: #1e3a8a; }
.rp-sub { font-size: 9px; color: #64748b; font-weight: 600; }
.rp-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 14px; margin: 0; }
.rp-meta div { border-left: 2px solid #e2e8f0; padding-left: 8px; }
.rp-meta dt { font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.rp-meta dd { margin: 1px 0 0; font-size: 10px; font-weight: 700; }

/* headline figures */
.rp-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; break-inside: avoid; }
.rp-kpi { border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 8px 6px; background: #f8fafc; }
.rp-kpi b { display: block; margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-kpi b small { font-size: 8.5px; font-weight: 700; color: #64748b; margin-left: 2px; letter-spacing: 0; }
.rp-f { display: block; font-size: 7.5px; color: #64748b; margin-top: 1px; }

/* blocks */
.rp-block { margin-top: 13px; break-inside: avoid; }
.rp-block h2 { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; break-after: avoid; }
.rp-block h2 span { font-weight: 600; letter-spacing: .02em; text-transform: none; color: #64748b; margin-left: 6px; }
.rp-break { break-before: page; break-inside: auto; margin-top: 0; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rp-chart { display: block; width: 100%; height: 150px; }
.rp-legend { display: flex; gap: 12px; margin-top: 4px; font-size: 8px; color: #64748b; }
.rp-legend i, .rp-table .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.rp-split { display: flex; height: 9px; border-radius: 3px; overflow: hidden; margin: 2px 0 6px; background: #eef2f7; }
.rp-split i { display: block; height: 100%; }

/* tables */
.rp-table { width: 100%; border-collapse: collapse; font-size: 8.8px; }
.rp-table thead { display: table-header-group; }
.rp-table tr { break-inside: avoid; }
.rp-table th { text-align: left; font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; padding: 4px 5px; border-bottom: 1px solid #cbd5e1; }
.rp-table td { padding: 4px 5px; border-bottom: 1px solid #eef2f7; vertical-align: top; font-variant-numeric: tabular-nums; }
.rp-table .r { text-align: right; }
.rp-table .m { color: #64748b; }
.rp-table .nw { white-space: nowrap; }
.rp-mini td { padding: 3px 5px; }
.rp-log td.areas { font-size: 8.3px; line-height: 1.4; }
.rp-log tr.mv-crit td { background: #fef2f2; }
.rp-log tr.mv-low td { background: #fff7f7; }
.rp-log tr.mv-crit td:first-child { border-left: 3px solid #dc2626; }
.rp-log tr.mv-low td:first-child { border-left: 3px solid #f87171; }
.rp-log tr.mv-crit td.dist { color: #b91c1c; font-weight: 800; }
.rp-log tr.mv-low td.dist { color: #b91c1c; font-weight: 700; }
.rp-log tfoot td { border-top: 1.5px solid #0f172a; border-bottom: 0; font-weight: 800; padding-top: 5px; }
.rp-end { margin-top: 12px; font-size: 7.5px; color: #94a3b8; }

/* ------------------------------------------------------------------ Export menu: PDF item with a file-name preview */
.menu button.mi-pdf { align-items: flex-start; }
.menu button.mi-pdf .mi { margin-top: 5px; }
.mi-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mi-stack em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.mi-stack code { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: none; border-radius: 0;
  font: 500 10.5px/1.3 "Geist Mono", ui-monospace, Consolas, monospace; color: var(--brand); }

/* ------------------------------------------------------------------ PDF progress card
   A little A4 sheet whose lines "write" themselves while the file name types out; a tick when saved. */
.pdf-card { --p: 0; position: fixed; right: 22px; bottom: 22px; z-index: 3000; display: flex; align-items: center; gap: 14px; width: 360px; padding: 14px 16px 14px 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.pdf-card.in { opacity: 1; transform: none; }
.pdf-sheet { position: relative; flex: none; width: 40px; height: 52px; border-radius: 4px; background: #fff; border: 1px solid var(--border-strong);
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .45); padding: 12px 7px 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.pdf-sheet .fold { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; background: linear-gradient(225deg, var(--surface) 50%, #dbe4f5 50%); }
.pdf-sheet i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--bar-lo), var(--bar-hi)); transform-origin: left;
  animation: pdf-write 1.6s var(--ease-out) infinite; }
.pdf-sheet i:nth-of-type(1) { width: 60%; background: #0f172a; animation-delay: 0s; }
.pdf-sheet i:nth-of-type(2) { width: 100%; animation-delay: .15s; }
.pdf-sheet i:nth-of-type(3) { width: 85%; animation-delay: .3s; }
.pdf-sheet i:nth-of-type(4) { width: 100%; animation-delay: .45s; }
.pdf-sheet i:nth-of-type(5) { width: 55%; animation-delay: .6s; }
@keyframes pdf-write { 0% { transform: scaleX(0); opacity: .3; } 45%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .25; } }
.pdf-check { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #16a34a; color: #fff;
  transform: scale(0); transition: transform .45s var(--spring, cubic-bezier(.34, 1.56, .64, 1)); }
.pdf-card.done .pdf-sheet i { animation: none; transform: none; opacity: .35; }
.pdf-card.done .pdf-check { transform: scale(1); }
.pdf-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.pdf-stage { font-size: 13px; font-weight: 750; color: var(--text); }
.pdf-card.done .pdf-stage { color: #15803d; }
.pdf-card.fail .pdf-stage { color: var(--mv-crit); }
.pdf-name { display: block; padding: 0; background: none; border-radius: 0; font: 500 11px/1.35 "Geist Mono", ui-monospace, Consolas, monospace; color: var(--text-2); overflow: hidden; }
.pdf-name span { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; text-overflow: ellipsis;
  animation: pdf-type 1.1s steps(var(--n, 30), end) .2s backwards; }
@keyframes pdf-type { from { max-width: 0; } to { max-width: 100%; } }
.pdf-bar { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.pdf-bar span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 2px; background: linear-gradient(90deg, var(--bar-lo), var(--bar-mid), var(--bar-hi)); transition: width .6s var(--ease-out); }
.pdf-card.done .pdf-bar span { background: #16a34a; }
@media (prefers-reduced-motion: reduce) { .pdf-sheet i, .pdf-name span { animation: none; } }