/* ==========================================================================
   SFC document standard — the print stylesheet (spec §15.2)

   This file serves TWO rendering engines, on purpose:

     · Chrome / Edge print + save-as-PDF — the ad-hoc reports (§15.2)
     · WeasyPrint — the monthly package PDF (§15.5)

   THE PAGE COUNTER IS SPLIT BETWEEN THEM, AND THAT IS DELIBERATE.
   `@page` margin boxes below are the standards-compliant way to number pages.
   Blink does not implement them and ignores those rules silently, so in the
   browser the numbers come from its own print header/footer. WeasyPrint DOES
   implement them, so the formal submitted document numbers correctly.

   DO NOT "fix" the missing browser counter by adding a PDF library — §2 chose
   browser print precisely to avoid one, and a JS pagination shim would be a
   third rendering path to keep in sync. See the note in spec §15.2.

   What the running footer carries instead is the §15.6 stamp:
   `Generated: dd/mm/yy`, plus `Snapshot: {month}` on packaged reports. That is
   what tells someone holding two versions of August which is authoritative,
   and unlike the page number it works on every engine.
   ========================================================================== */

/* ---------- 1. The preview overlay (screen) ------------------------------
   The same markup is previewed on screen before printing, so what you approve
   is what comes out (§15.2: "then preview → print or save as PDF"). */

#report-root { display: none; }

body.is-previewing #report-root {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-3);
  padding: var(--sp-6) var(--sp-4) var(--sp-16);
}
body.is-previewing { overflow: hidden; }

.preview-bar {
  position: sticky;
  top: calc(var(--sp-6) * -1);
  z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: calc(var(--sp-6) * -1) auto var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  max-width: 210mm;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.preview-bar h2 { margin: 0; flex: 1; font-size: var(--fs-500); font-weight: 800; }
.preview-note { font-size: var(--fs-100); color: var(--text-3); flex-basis: 100%; }

/* The sheet mimics A4 on screen so pagination is not a surprise. */
.report {
  max-width: 210mm;
  margin: 0 auto;
  padding: 16mm 14mm;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-family: var(--font);
  font-size: 10.5pt;
  line-height: 1.55;
}

/* ---------- 2. Page setup ------------------------------------------------- */

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

  /* Honoured by WeasyPrint (§15.5), ignored by Blink. Kept because the
     formal monthly document is rendered by WeasyPrint.

     NOTE for Phase 10: `var()` inside a @page margin box resolves only if the
     engine inherits custom properties into the page context. WeasyPrint does,
     but verify it on the first real package rather than assuming — the failure
     mode is cosmetic (numbers fall back to the initial colour), not broken
     pagination, so it will not announce itself. */
  @bottom-right {
    content: counter(page) " / " counter(pages);
    font-family: 'Cairo', sans-serif;
    font-size: 8pt;
    color: var(--print-mute);
  }
  @bottom-left {
    content: string(report-stamp);
    font-family: 'Cairo', sans-serif;
    font-size: 8pt;
    color: var(--print-mute);
  }
}

/* ---------- 3. Print media ------------------------------------------------ */

@media print {
  /* Colours must survive: the chips, the project dots and the green badge
     carry meaning, and a greyscale report loses it (§15.2). */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Everything that is not the report goes away. */
  #boot, #login, #app, .scrim, .drawer, #modal-host, #pop-host,
  #menu-host, #toasts, .preview-bar { display: none !important; }

  html, body { background: var(--paper); margin: 0; padding: 0; }
  body.is-previewing { overflow: visible; }

  #report-root {
    display: block !important;
    position: static !important;
    inset: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    background: var(--paper) !important;
  }

  .report {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: var(--paper);
    color: var(--print-ink);
    font-size: 9.5pt;
  }

  /* Chrome repeats a fixed element on every printed page — this is the
     browser path's running header and footer.

     They are pulled OUT of the page content box with negative offsets so they
     sit inside the @page margin. Left at `top: 0` they overlap the first line
     of content on every page after the first: `padding-top` on .report applies
     once to the whole flow, not per page, so it only protects page one.
     The offsets below are inside the 18mm/20mm margins declared in @page.

     MEASURED, do not assume better: printing the tasks report to PDF through
     Chrome and counting the running chrome's fill operator found it on 4 of 5
     pages, not 5 of 5. Chrome's repetition of fixed elements across printed
     pages is not fully reliable, and no CSS makes it so.

     This is why the §15.6 stamp does NOT depend on the running footer alone:
       · the cover page carries it in normal flow — guaranteed, every time
       · the running footer repeats it on most pages, browser willing
       · the @page margin box below carries it on EVERY page under WeasyPrint,
         which renders the formal monthly document (§15.5)
     Treat the footer as a convenience, and the cover plus WeasyPrint as the
     guarantee. */
  .rep-running-head {
    display: flex !important;
    position: fixed;
    top: -13mm; inset-inline: 0;
    align-items: center; gap: 6pt;
    padding-bottom: 2pt;
    border-bottom: 1.5pt solid var(--gold);
    font-size: 7.5pt;
    font-weight: 700;
    color: var(--print-mute);
  }
  .rep-running-foot {
    display: flex !important;
    position: fixed;
    bottom: -14mm; inset-inline: 0;
    align-items: center; gap: 6pt;
    padding-top: 2pt;
    border-top: 0.5pt solid var(--print-rule);
    font-size: 7.5pt;
    color: var(--print-mute);
  }
  .rep-running-head .spacer, .rep-running-foot .spacer { flex: 1; }


  .rep-cover { break-after: page; }
  .rep-section { break-inside: avoid-page; }
  .rep-task, .rep-meeting, .rep-person, .rep-appendix-item { break-inside: avoid; }
  .rep-project { break-before: auto; }
  h1, h2, h3, h4 { break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }

  a { text-decoration: none; color: inherit; }
  /* Print the permanent file route beside its link text — a printed report
     with an unresolvable link is a dead end (§14.4). */
  .rep-filelink::after { content: " (" attr(data-href) ")"; font-size: 7pt; color: var(--print-mute); }
}

/* On screen the running head/foot are part of the sheet, not fixed. */
.rep-running-head, .rep-running-foot {
  display: flex;
  align-items: center; gap: 8px;
  font-size: 8pt;
  color: var(--text-2);
}
.rep-running-head {
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--gold);
  font-weight: 700;
}
.rep-running-foot {
  padding-top: 6px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.rep-running-head .spacer, .rep-running-foot .spacer { flex: 1; }

/* ---------- 4. Cover page (§15.2) ----------------------------------------- */

.rep-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: 200mm;
  gap: 10mm;
}
.rep-badge {
  width: 34mm; height: 34mm;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green);
  border: 2mm solid var(--gold);
}
.rep-badge svg { width: 20mm; height: 14mm; }
.rep-cover h1 {
  margin: 0;
  font-size: 22pt;
  font-weight: 800;
  line-height: 1.3;
  color: var(--green);
}
.rep-cover .rep-org { margin: 0; font-size: 12pt; font-weight: 700; color: var(--text-2); }
.rep-cover .rep-scope { margin: 0; font-size: 11pt; color: var(--text-2); }

/* The §15.6 stamp. Generated on every report; packaged reports add Snapshot. */
.rep-stamp {
  display: inline-flex; flex-direction: column; gap: 2mm;
  padding: 4mm 8mm;
  border: 1px solid var(--line);
  border-radius: 3mm;
  font-size: 9pt;
  color: var(--text-2);
}
.rep-stamp b { color: var(--text); font-weight: 700; }

/* ---------- 5. Report body ------------------------------------------------ */

.rep-section { margin-bottom: 10mm; }
.rep-section > h2 {
  margin: 0 0 4mm;
  padding-bottom: 2mm;
  border-bottom: 1.5pt solid var(--gold);
  font-size: 13pt;
  font-weight: 800;
  color: var(--green);
}
.rep-project { margin-bottom: 8mm; }
.rep-project > h3 {
  display: flex; align-items: center; gap: 3mm;
  margin: 0 0 3mm;
  font-size: 11.5pt;
  font-weight: 800;
}
.rep-project > h3::before {
  content: "";
  width: 3mm; height: 3mm;
  border-radius: 50%;
  background: var(--dot, var(--green));
  flex: none;
}
.rep-person { margin: 0 0 5mm; padding-inline-start: 4mm; border-inline-start: 1pt solid var(--line); }
.rep-person > h4 { margin: 0 0 2mm; font-size: 10.5pt; font-weight: 800; }

.rep-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.rep-table th {
  text-align: start;
  padding: 2mm;
  background: var(--surface-2);
  border-bottom: 1pt solid var(--line);
  font-size: 8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
}
.rep-table td { padding: 2mm; border-bottom: 0.5pt solid var(--line-soft); vertical-align: top; }
.rep-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.rep-chip {
  display: inline-block;
  padding: 0.5mm 2mm;
  border-radius: 10mm;
  border: 0.5pt solid currentColor;
  font-size: 7.5pt;
  font-weight: 700;
  white-space: nowrap;
}
.rep-chip.ok   { color: var(--green-ink); background: var(--tint-green); }
.rep-chip.warn { color: var(--orange-ink); background: var(--tint-orange); }
.rep-chip.bad  { color: var(--red-ink); background: var(--tint-red); }
.rep-chip.info { color: var(--blue-ink); background: var(--tint-blue); }
.rep-chip.mute { color: var(--slate-ink); background: var(--tint-slate); }

/* The confirmation stamp is what makes the tasks report trustworthy (§15.3),
   so it is typographically distinct rather than another table cell. */
.rep-confirm { font-size: 8.5pt; color: var(--green-ink); font-weight: 700; }
.rep-unconfirmed { font-size: 8.5pt; color: var(--text-3); }
.rep-late { color: var(--red-ink); font-weight: 700; }
.rep-source { font-size: 8pt; color: var(--text-3); }

.rep-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34mm, 1fr));
  gap: 3mm;
  margin-bottom: 5mm;
}
.rep-stat {
  padding: 3mm;
  border: 0.5pt solid var(--line);
  border-radius: 2mm;
  background: var(--surface-2);
}
.rep-stat .k { font-size: 7.5pt; font-weight: 700; color: var(--text-2); }
.rep-stat .v { font-size: 15pt; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }

.rep-meeting { margin-bottom: 6mm; padding-bottom: 4mm; border-bottom: 0.5pt solid var(--line); }
.rep-meeting > h4 { margin: 0 0 1.5mm; font-size: 10.5pt; font-weight: 800; }
.rep-meta {
  display: flex; flex-wrap: wrap; gap: 1mm 4mm;
  margin-bottom: 2mm;
  font-size: 8.5pt;
  color: var(--text-2);
}
.rep-block { margin-top: 2.5mm; }
.rep-block > h5 {
  margin: 0 0 1mm;
  font-size: 8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
}
.rep-block p, .rep-block ul { margin: 0; font-size: 9pt; }
.rep-block ul { padding-inline-start: 5mm; }
.rep-empty { font-size: 9pt; color: var(--text-3); font-style: italic; }

.rep-appendix-item {
  display: flex; gap: 3mm; align-items: flex-start;
  padding: 2mm 0;
  border-bottom: 0.5pt solid var(--line-soft);
  font-size: 8.5pt;
}
/* The thumbnail is a real image since the Storage build — a data URI, never a
   signed URL, because a print that starts before an expiry and renders after
   it produces a PDF of broken images with nothing raised (§15.3). object-fit
   keeps a landscape photo and a portrait one the same block, so the appendix
   does not comb. */
.rep-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.rep-thumb-icon { color: var(--text-3); }

.rep-thumb {
  width: 18mm; height: 18mm;
  flex: none;
  display: grid; place-items: center;
  border: 0.5pt solid var(--line);
  border-radius: 1.5mm;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 7pt;
  text-align: center;
}

/* Dates and ranges. A range is a single left-to-right run; laid out RTL the
   bidi algorithm swaps its halves and the report reads as though the period
   runs backwards. Printed, nobody can inspect it — so it is isolated here. */
.rep-range { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

/* The per-person report says what its numbers do NOT measure, beside the
   summary they qualify (§15.3a). Printed, not a tooltip: the caveat has to
   travel with the document, because the document is what gets forwarded and
   the screen is not. Small and grey, but never hidden — it is the part a
   reader needs in order to read the rest correctly. */
.rep-caveat {
  margin: 2mm 0 0;
  font-size: 7.5pt;
  line-height: 1.5;
  color: var(--text-3);
  border-inline-start: 0.75pt solid var(--line);
  padding-inline-start: 2.5mm;
}

/* Internal-only marker — this document never enters the monthly package. */
.rep-internal {
  margin: 0 0 2mm;
  font-size: 8pt;
  font-weight: 700;
  color: var(--ink-warn);
}
/* The cancellation reason, beside the status chip on a meeting block. Not a
   chip itself: a chip is a state, and this is a sentence somebody typed. */
.rep-reason { font-style: italic; color: #444; }

/* The narrowed-report line, ON the cover. Louder than .rep-internal because it
   is the one sentence that stops a reader mistaking a personal extract for the
   organisation's figures. */
.rep-narrowed {
  margin-top: 6mm;
  padding: 3mm 4mm;
  border: 0.6pt solid var(--print-rule);
  font-size: 9pt;
  font-style: italic;
  color: var(--print-mute);
  max-width: 120mm;
}