/* print.css — the report.
 *
 * Swiss, and black on white with nothing in between but tints of black.
 *
 * Loaded by the app for the on-screen preview, applied by the browser when the
 * inspector prints to PDF, and inlined verbatim into the standalone HTML file
 * that gets emailed to the client. One stylesheet for all three, so what the
 * inspector approves on screen is what the client opens.
 *
 * The report is always black on white, in both themes. A client receiving a
 * dark-mode PDF would be receiving something odd.
 *
 * Because there is no colour, the verdict is carried by inversion: a failed
 * report knocks the word out of a solid black field. That survives a fax, a
 * photocopier and a monochrome laser printer, which a red badge does not —
 * and a QC report gets photocopied more than most documents.
 */

.rp {
  --rp-ink: #000;
  --rp-paper: #fff;
  --rp-2: rgba(0, 0, 0, 0.68);
  --rp-3: rgba(0, 0, 0, 0.45);
  --rp-4: rgba(0, 0, 0, 0.26);
  --rp-rule: rgba(0, 0, 0, 0.9);
  --rp-hair: rgba(0, 0, 0, 0.16);
  --rp-wash: rgba(0, 0, 0, 0.05);

  position: relative;
  background: var(--rp-paper);
  color: var(--rp-ink);
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  padding: 34px;
  max-width: 840px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rp * { box-sizing: border-box; }
.rp h1, .rp h2, .rp h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.rp p { margin: 0 0 8px; }
.rp-empty { color: var(--rp-4); }

.rp-standalone { margin: 0; padding: 0; background: #e8e8e8; }
.rp-standalone .rp { margin: 24px auto; }

/* ---- the stamp --------------------------------------------------- */

/*
 * The mark, used large and off-square the way a rubber stamp lands — never
 * quite level, never quite centred. It sits over the text rather than beside
 * it, which is what makes it read as applied to the document instead of
 * printed as part of it.
 *
 * It is always behind the words (z-index 0 against the content's 1) and always
 * pointer-events: none, so it can never take a click or obscure a reading.
 */
.rp-stamp {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  color: var(--rp-ink);
}
.rp-stamp svg { width: 100%; height: 100%; display: block; filter: url(#qm-ink); }

/* Over the cover, bleeding past the right edge of the type area. */
.rp-stamp--cover {
  top: -14px; right: -26px;
  width: 230px; height: 230px;
  opacity: 0.1;
  transform: rotate(-13deg);
}

/* On the conclusion, at full strength in clear space — this is the one that
   reads as the inspector having stamped the page. */
.rp-stamp--close {
  top: -6px; right: 4px;
  width: 168px; height: 168px;
  opacity: 0.82;
  transform: rotate(9deg);
}

/* Struck across the whole page when the lot failed. Large, faint, unmissable
   at a glance and still readable underneath. */
.rp-stamp--verdict {
  top: 38%; left: 50%;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  opacity: 0.06;
  transform: rotate(-19deg);
}

.rp-cover, .rp-section, .rp-close { position: relative; z-index: 1; }

/* ---- cover ------------------------------------------------------- */

.rp-cover { border-bottom: 2px solid var(--rp-rule); padding-bottom: 22px; margin-bottom: 26px; }

.rp-brandline { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.rp-mark { width: 38px; height: 38px; flex: none; color: var(--rp-ink); }
.rp-company { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.rp-tagline { font-size: 8.5px; color: var(--rp-3); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; }
.rp-refbox { margin-left: auto; text-align: right; }
.rp-reflabel { font-size: 8px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rp-3); font-weight: 700; }
.rp-ref { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; }

.rp-title { font-size: 40px; line-height: 0.96; letter-spacing: -0.04em; }
.rp-subtitle { font-size: 15px; color: var(--rp-2); margin: 8px 0 22px; letter-spacing: -0.015em; }
/* The client's mark on the cover, in place of their name. Height-capped so
   marks of different proportions all sit on the same baseline, and the only
   colour on the document besides the product photographs. */
/* A mark needs air the way a line of type does not: it is somebody else's
   artwork, and set tight under a 38px title it reads as part of it. The margin
   sits on the mark rather than on `.rp-subtitle`, so a client shown by name
   keeps the closer spacing that a line of text wants.
   Inline-block, not block: the period report prints the SKU and factory
   filters after the mark, and a block would drop them underneath it. */
.rp-clientmark {
  display: inline-block; vertical-align: middle;
  margin: 18px 10px 12px 0; width: auto; max-width: 240px;
}

.rp-headline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rp-headline-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 9px; color: var(--rp-3);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
}

/* Inversion, not colour. */
.rp-verdict {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 15px;
  border: 1px solid var(--rp-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-verdict--pass { background: var(--rp-paper); color: var(--rp-ink); }
.rp-verdict--fail { background: var(--rp-ink); color: var(--rp-paper); }
.rp-verdict--hold { background: var(--rp-paper); color: var(--rp-ink); border-style: double; border-width: 3px; padding: 5px 13px; }
.rp-verdict--pending { background: var(--rp-paper); color: var(--rp-3); border-style: dashed; border-color: var(--rp-hair); }

.rp-override {
  margin-top: 20px; padding: 11px 0 11px 14px;
  border-left: 3px solid var(--rp-ink);
  background: var(--rp-wash);
  font-size: 11px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.rp-summary { margin-top: 24px; }
.rp-summary h2 {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--rp-3); margin-bottom: 7px; font-weight: 700;
}
.rp-summary p { font-size: 13.5px; line-height: 1.55; max-width: 66ch; }

.rp-method { font-size: 11.5px; color: var(--rp-2); max-width: 70ch; margin-bottom: 14px; }
.rp-method strong { color: var(--rp-ink); }

/* ---- sections ---------------------------------------------------- */

.rp-section { margin-bottom: 30px; }
.rp-section > h2 {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--rp-ink);
  padding-bottom: 6px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rp-rule);
  font-weight: 700;
}
.rp-section h3 { font-size: 11.5px; margin: 16px 0 7px; text-transform: uppercase; letter-spacing: 0.1em; }

.rp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 30px; margin: 0; }
.rp-field { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--rp-hair); font-size: 11px; }
.rp-field dt { color: var(--rp-3); flex: none; text-transform: uppercase; letter-spacing: 0.1em; font-size: 8.5px; font-weight: 700; align-self: center; }
.rp-field dd { margin: 0; text-align: right; font-weight: 500; }

.rp-note { font-size: 10.5px; color: var(--rp-2); margin-top: 12px; max-width: 74ch; }
.rp-note--warn {
  border-left: 3px solid var(--rp-ink);
  background: var(--rp-wash);
  padding: 9px 0 9px 12px; color: var(--rp-ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---- tables ------------------------------------------------------ */

.rp-planbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rp-rule);
  border-bottom: 1px solid var(--rp-rule);
  margin-bottom: 16px;
}
.rp-planbar > div { padding: 10px 12px 10px 0; display: grid; gap: 3px; border-left: 1px solid var(--rp-hair); padding-left: 12px; }
.rp-planbar > div:first-child { border-left: 0; padding-left: 0; }
.rp-planbar span { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rp-3); font-weight: 700; }
.rp-planbar strong { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rp-table th, .rp-table td { padding: 8px 8px 8px 0; text-align: left; border-bottom: 1px solid var(--rp-hair); vertical-align: top; }
.rp-table thead th {
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--rp-3); font-weight: 700;
  border-bottom: 1px solid var(--rp-rule);
}
.rp-table tbody th { font-weight: 500; }
.rp-num { text-align: right; white-space: nowrap; }
.rp-found { font-weight: 700; font-size: 13px; }
.rp-state { text-align: right; white-space: nowrap; text-transform: uppercase; font-size: 9px; letter-spacing: 0.12em; font-weight: 700; }

.rp-row--reject { background: var(--rp-wash); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-row--reject th { box-shadow: inset 3px 0 0 var(--rp-ink); padding-left: 10px; font-weight: 700; }
.rp-row--reject .rp-found { background: var(--rp-ink); color: var(--rp-paper); padding: 1px 5px; }
.rp-tol { color: var(--rp-3); font-size: 9.5px; }

.rp-readings { line-height: 2.1; }
.rp-reading {
  display: inline-block; padding: 1px 5px; margin: 0 3px 3px 0;
  border: 1px solid var(--rp-hair); font-size: 10px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-reading--over, .rp-reading--under { background: var(--rp-ink); color: var(--rp-paper); border-color: var(--rp-ink); font-weight: 700; }

/* ---- defects ----------------------------------------------------- */

.rp-tallies { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rp-rule); border-bottom: 1px solid var(--rp-rule); margin-bottom: 18px; }
.rp-tally {
  padding: 10px 12px 10px 0; display: grid; gap: 2px;
  border-left: 1px solid var(--rp-hair); padding-left: 12px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-tally:first-child { border-left: 0; padding-left: 0; }
.rp-tally span { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rp-3); font-weight: 700; order: 2; }
.rp-tally strong { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; order: 1; }
.rp-tally--major strong { color: var(--rp-2); }
.rp-tally--minor strong { color: var(--rp-3); font-weight: 400; }

.rp-defect { padding: 13px 0; border-bottom: 1px solid var(--rp-hair); }
.rp-defect:last-child { border-bottom: 0; }
.rp-defect-head { display: flex; align-items: center; gap: 9px; }
.rp-defect-n { font-family: ui-monospace, Menlo, monospace; font-size: 9px; color: var(--rp-4); }
.rp-defect-title { flex: 1 1 auto; font-weight: 700; font-size: 12px; letter-spacing: -0.012em; }
.rp-defect-qty { font-weight: 700; white-space: nowrap; font-size: 12px; }
.rp-defect-meta { display: flex; gap: 18px; margin: 5px 0 0; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; }
.rp-defect-meta div { display: flex; gap: 6px; }
.rp-defect-meta dt { color: var(--rp-3); font-weight: 700; }
.rp-defect-meta dd { margin: 0; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0; }
.rp-defect-desc { font-size: 11px; color: var(--rp-2); margin: 6px 0; max-width: 70ch; }

/* Solid, outlined, ruled — severity by ink, since there is no colour. */
.rp-chip {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 3px 7px; flex: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-chip--critical { background: var(--rp-ink); color: var(--rp-paper); border: 1px solid var(--rp-ink); }
.rp-chip--major { background: var(--rp-paper); color: var(--rp-ink); border: 1px solid var(--rp-ink); }
.rp-chip--minor { background: var(--rp-paper); color: var(--rp-3); border: 1px solid var(--rp-hair); }

/* ---- photographs ------------------------------------------------- */

.rp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.rp-photos figure { margin: 0; break-inside: avoid; page-break-inside: avoid; }
.rp-photos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--rp-hair); display: block;
}
.rp-photos figcaption { font-size: 9px; color: var(--rp-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.rp-photos--defect { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rp-photos--inline { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 7px; }
.rp-photos--gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---- checklist --------------------------------------------------- */

.rp-checkgroup { margin-bottom: 16px; }
.rp-table--checks td { font-size: 11px; }
.rp-check-mark {
  width: 48px; white-space: nowrap;
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}
.rp-check--pass .rp-check-mark { color: var(--rp-2); }
.rp-check--fail .rp-check-mark { background: var(--rp-ink); color: var(--rp-paper); padding: 2px 5px; }
.rp-check--fail td { background: var(--rp-wash); font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-check--na .rp-check-mark, .rp-check--unanswered .rp-check-mark { color: var(--rp-4); }
.rp-check-note { font-size: 10px; color: var(--rp-2); margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--rp-hair); font-weight: 400; }

/* ---- close ------------------------------------------------------- */

.rp-close { border-top: 2px solid var(--rp-rule); padding-top: 22px; }
.rp-conclusion { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 30px; padding-right: 180px; }
.rp-conclusion p { font-size: 11.5px; color: var(--rp-2); margin: 4px 0 0; max-width: 56ch; }

.rp-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 34px 0 26px; }
.rp-sign { display: grid; }
.rp-sign-img { max-height: 58px; max-width: 100%; object-fit: contain; object-position: left bottom; align-self: end; }
.rp-sign-line { border-bottom: 1px solid var(--rp-ink); margin-top: 6px; min-height: 58px; }
.rp-sign-img + .rp-sign-line { min-height: 0; margin-top: 2px; }
.rp-sign-label { display: grid; gap: 2px; margin-top: 7px; font-size: 8.5px; color: var(--rp-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.rp-sign-label strong { font-size: 11.5px; color: var(--rp-ink); text-transform: none; letter-spacing: -0.01em; }

.rp-footer { border-top: 1px solid var(--rp-hair); padding-top: 13px; font-size: 9px; color: var(--rp-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.rp-footer strong { color: var(--rp-ink); font-weight: 700; }
.rp-disclaimer { margin: 9px 0; line-height: 1.6; max-width: 76ch; text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.rp-reffoot { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0; }

/* ---- print ------------------------------------------------------- */

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

@media print {
  .topbar, .bottombar, .toast, .no-print, .page-head, #boot { display: none !important; }

  html, body { background: #fff; }
  .view { padding: 0 !important; max-width: none; margin: 0; }
  .reportframe { border: 0; box-shadow: none; overflow: visible; }
  .rp-standalone { background: #fff; }
  .rp, .rp-standalone .rp {
    padding: 0; max-width: none; margin: 0;
    font-size: 10pt; line-height: 1.4;
  }

  /* A defect split across a page break, or a photograph orphaned from the
     caption that explains it, is where a report loses an argument. */
  .rp-keep, .rp-defect, .rp-checkgroup, .rp-tally, .rp-sign { break-inside: avoid; page-break-inside: avoid; }
  .rp-section > h2 { break-after: avoid; page-break-after: avoid; }
  .rp-table thead { display: table-header-group; }
  .rp-table tr { break-inside: avoid; page-break-inside: avoid; }
  .rp-cover { break-after: avoid; }

  .rp-title { font-size: 30pt; }
  .rp-photos { grid-template-columns: repeat(3, 1fr); }
  .rp-photos--inline { grid-template-columns: repeat(5, 1fr); }

  /* The stamps have to survive the print, or the document loses the thing
     that makes it look issued rather than drafted. */
  .rp-stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* The full-page one is a screen affordance; on paper it muddies the type at
     the resolutions most office printers manage. */
  .rp-stamp--verdict { display: none; }

  a { text-decoration: none; color: inherit; }
}

/* While the app is printing, hide the shell so only the report goes to paper. */
body.printing .topbar,
body.printing .bottombar,
body.printing .toast,
body.printing .no-print { display: none !important; }

/* ---- charts ------------------------------------------------------ */

/*
 * The trend charts, from `daily/charts.js`.
 *
 * They live in this stylesheet rather than in the daily log's own because they
 * are report content: `exportHtml` inlines this file verbatim into the
 * standalone document, and a chart that lost its type sizes on the way to a
 * client would be a chart of unlabelled rectangles.
 *
 * The rules are deliberately not scoped under `.rp`, because the same charts
 * are drawn on the trends screen, which is not a report.
 */

.qc-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 660px;
  overflow: visible;
  /* Without this a browser drops the fills when printing and leaves an
     empty frame on the page — which is worse than no chart at all. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The calendar is a grid of fixed squares rather than a shape that scales, so
   it keeps the size it was drawn at instead of stretching to the column. */
.qc-chart--cal { width: auto; height: auto; max-width: 100%; }

.qc-chart text {
  font-family: "Helvetica Neue", Helvetica, Inter, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  fill: #000;
}
.qc-label { font-size: 10.5px; font-weight: 500; }
.qc-value { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qc-muted { font-size: 8.5px; font-weight: 700; fill: rgba(0, 0, 0, 0.45); letter-spacing: 0.06em; }

.qc-axis { stroke: rgba(0, 0, 0, 0.9); stroke-width: 1; }
/* The mean is a reference, not a reading, so it is dashed and thin — it has
   to be visible under the line without competing with it. */
.qc-mean { stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; stroke-dasharray: 3 3; }

.rp-figure { margin: 12px 0 18px; page-break-inside: avoid; break-inside: avoid; }

/*
 * Better or worse.
 *
 * There is no green and no red to spend here, so direction is carried by the
 * arrow and judgement by weight: a worse movement is set solid and a better
 * one is not. Reading it wrong costs nothing, because the arrow and the
 * number are both stated.
 */
.qc-move { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.qc-move--worse { background: #000; color: #fff; padding: 1px 5px; }
.qc-move--better { color: rgba(0, 0, 0, 0.68); font-weight: 500; }
.qc-move--flat { color: rgba(0, 0, 0, 0.45); font-weight: 500; }

/* The client's own SKU code, beside their own name for the product. */
.rp-skucode {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 8px; color: var(--rp-3); font-weight: 400; margin-top: 2px;
  overflow-wrap: anywhere;
}

/* ---- product reference images ------------------------------------- */

/*
 * What the thing is meant to look like, against which the fault photographs
 * are read. Small and in a row: they identify, they do not evidence.
 */
.rp-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px; margin: 10px 0 12px;
}
.rp-product { margin: 0; }
.rp-product img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--rp-wash);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-product figcaption { margin-top: 4px; line-height: 1.25; }
.rp-product strong { display: block; font-size: 9px; }
.rp-product span {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 7px; color: var(--rp-3); overflow-wrap: anywhere;
}

/*
 * The configuration a batch was built to. Set under the product rather than
 * beside it: the product is what the report is about, and the configuration
 * qualifies it.
 */
.rp-config { display: block; font-size: 9px; color: var(--rp-2); font-weight: 400; margin-top: 2px; }