/* ===========================================================================
   Paper view — the printable/PDF rendering of a field form.

   Hand-written rather than Tailwind on purpose. This is a fixed document
   palette that must NOT follow the app's light/dark theme: an inspection
   printed at 11pm has to look identical to one printed at noon, and a navy
   header bar on a dark-mode page would come out as a black smear. Nothing in
   here reads a theme variable.

   Sizing is in points so the on-screen preview and the printed page agree.
   Layout is landscape US Letter, matching the source documents.
   =========================================================================== */

.pp-root {
  --navy: #1f3864;
  --navy-soft: #2d4a7c;
  --orange: #ed7d31;
  --label: #dbe5f1;
  --zebra: #f2f6fb;
  --peach: #fbe5d6;
  --line: #a9bcd6;
  --line-soft: #c8d5e6;

  background: #fff;
  color: #14203a;
  font-family: "Segoe UI", Aptos, Inter, system-ui, -apple-system, sans-serif;
  font-size: 8pt;
  line-height: 1.35;
}

/* --------------------------------- screen -------------------------------- */

.pp-stage {
  background: #52565e;
  min-height: 100%;
  overflow: auto;
  padding: 24px 0 64px;
}

.pp-sheet {
  width: 10.2in; /* letter landscape minus print margins */
  margin: 0 auto;
  padding: 0.35in 0.4in 0.5in;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  /* `zoom` rather than `transform: scale()` because it reflows the layout box,
     so a zoomed-out sheet does not leave a page-width gutter beside it. */
  zoom: var(--pp-zoom, 1);
}

/* ------------------------------ running head ----------------------------- */

.pp-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1.5pt solid var(--orange);
  padding-bottom: 3pt;
  margin-bottom: 10pt;
  font-size: 7pt;
}
.pp-head-title {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  flex: 1 1 40%;
  line-height: 1.25;
}
.pp-head-mid {
  flex: 1 1 30%;
  text-align: center;
  color: #333;
}
.pp-head-right {
  flex: 1 1 30%;
  text-align: right;
  color: #333;
}

.pp-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 0.75pt solid var(--line-soft);
  padding-top: 3pt;
  margin-top: 12pt;
  font-size: 6.5pt;
  color: #555;
}

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

.pp-cover {
  display: flex;
  gap: 18pt;
  margin-bottom: 14pt;
}
.pp-cover-main {
  flex: 1 1 auto;
}
.pp-cover h1 {
  font-size: 26pt;
  line-height: 1.1;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8pt;
  text-transform: uppercase;
}
.pp-cover-scope {
  font-size: 13pt;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 8pt;
}
.pp-cover-blurb {
  max-width: 5.6in;
  margin-bottom: 10pt;
  color: #333;
}
.pp-cover-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2pt 10pt;
  max-width: 5.6in;
}
.pp-cover-meta dt {
  font-weight: 700;
  color: var(--navy);
}

.pp-cover-side {
  width: 2.4in;
  flex: 0 0 auto;
  background: var(--navy);
  color: #fff;
  padding: 12pt;
}
.pp-cover-logo {
  text-align: center;
  font-weight: 700;
  font-size: 12pt;
  line-height: 1.25;
  margin-bottom: 12pt;
}
.pp-cover-side h3 {
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 5pt;
  letter-spacing: 0.03em;
}
.pp-type {
  margin-bottom: 3pt;
}
.pp-type-list {
  margin-bottom: 12pt;
}

/* ------------------------------- callouts ------------------------------- */

.pp-important {
  background: var(--peach);
  padding: 6pt 8pt;
  font-size: 7pt;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12pt;
}
.pp-note {
  background: #eaf0f8;
  padding: 5pt 7pt;
  font-size: 7pt;
  margin-bottom: 8pt;
}
.pp-note--plain {
  background: transparent;
  padding: 0 0 6pt;
  font-weight: 700;
  color: var(--navy);
}

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

.pp-section {
  margin-bottom: 14pt;
}
.pp-section-bar {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 10pt;
  padding: 4.5pt 8pt;
  margin-bottom: 7pt;
  text-transform: uppercase;
  break-after: avoid;
  page-break-after: avoid;
}
.pp-block-title {
  font-size: 12pt;
  font-weight: 700;
  color: var(--navy);
  margin: 10pt 0 5pt;
  break-after: avoid;
  page-break-after: avoid;
}

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

.pp-root table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6pt;
}
.pp-root th,
.pp-root td {
  border: 0.75pt solid var(--line);
  padding: 3pt 4pt;
  vertical-align: top;
  text-align: left;
}
.pp-root thead th {
  background: var(--navy);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  text-align: center;
}
.pp-root tbody tr:nth-child(even) {
  background: var(--zebra);
}
.pp-root tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Field grids: label cell / value cell pairs, two pairs per row. */
.pp-fields th {
  background: var(--label);
  color: var(--navy);
  font-weight: 700;
  width: 13%;
  text-align: left;
}
.pp-fields td {
  width: 37%;
}
.pp-fields tbody tr:nth-child(even) {
  background: transparent;
}
.pp-value--empty {
  color: #8a93a3;
}

/* Checklist grid. Column widths are tuned so the requirement text gets the
   room and the C/NC/N-A boxes stay thumb-sized on paper. */
.pp-check col.c-n { width: 3.2%; }
.pp-check col.c-text { width: 54%; }
.pp-check col.c-mark { width: 4.2%; }
.pp-check col.c-risk { width: 5%; }
.pp-check col.c-comment { width: 25%; }
.pp-check td.n,
.pp-check td.mark,
.pp-check td.risk {
  text-align: center;
}
.pp-check td.mark {
  font-weight: 700;
  font-size: 9pt;
}
.pp-mark-on {
  color: #0b6b3a;
}
.pp-mark-on--nc {
  color: #b42318;
}
.pp-mark-on--na {
  color: #475467;
}
.pp-risk-cell {
  font-weight: 700;
  font-size: 7pt;
}

/* Risk matrix. */
.pp-matrix th.axis {
  background: var(--label);
  color: var(--navy);
  text-align: left;
}
.pp-matrix td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Registers and the photo log get roomier rows so a printed copy can be
   written on by hand where the digital record is incomplete. */
.pp-register td {
  height: 26pt;
}
.pp-record th {
  background: var(--label);
  color: var(--navy);
  width: 22%;
  font-weight: 700;
  text-align: left;
}
.pp-record td {
  height: 34pt;
}
.pp-record tbody tr:nth-child(even) {
  background: transparent;
}

/* ------------------------------- guidance ------------------------------- */

.pp-bullets {
  margin: 0 0 8pt;
  padding-left: 14pt;
}
.pp-bullets li {
  margin-bottom: 2pt;
}

.pp-notes-line {
  font-size: 7pt;
  margin: 2pt 0 8pt;
  display: flex;
  gap: 4pt;
}
.pp-notes-line b {
  color: var(--navy);
  white-space: nowrap;
}
.pp-notes-line span {
  flex: 1;
  border-bottom: 0.5pt solid #9aa7bb;
  min-height: 9pt;
}

.pp-checkbox {
  display: inline-block;
  width: 7pt;
  height: 7pt;
  border: 0.75pt solid #44536b;
  margin-right: 3pt;
  vertical-align: -0.5pt;
  text-align: center;
  line-height: 6pt;
  font-size: 6pt;
  font-weight: 700;
}
.pp-checkbox--on {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pp-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6pt;
  margin-bottom: 8pt;
}
.pp-photo-grid figure {
  margin: 0;
  break-inside: avoid;
}
.pp-photo-grid img {
  width: 100%;
  border: 0.75pt solid var(--line);
  display: block;
}
.pp-photo-grid figcaption {
  font-size: 6.5pt;
  color: #444;
  padding-top: 2pt;
}

.pp-disclaimer {
  background: var(--peach);
  padding: 6pt 8pt;
  font-size: 7pt;
  line-height: 1.3;
  margin-top: 10pt;
}

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

@page {
  size: letter landscape;
  /* Top and bottom margins leave room for the repeated head and foot, which
     are pulled up/down into them by the offsets below. */
  margin: 0.78in 0.4in 0.52in;
}

@media print {
  html,
  body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The app shell is a full-height flex column with hidden overflow, which in
     print collapses the document to a single clipped page. Release it. */
  #app {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The toolbar is a screen affordance; it must never reach the page. */
  .pp-noprint {
    display: none !important;
  }

  .pp-stage {
    background: #fff;
    padding: 0;
    overflow: visible;
  }
  .pp-sheet {
    width: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    zoom: 1;
  }

  /* Fixed elements repeat on every printed page, which is how the running head
     and footer appear on all 26 pages without manual pagination. */
  .pp-head {
    position: fixed;
    top: -0.60in;
    left: 0;
    right: 0;
    background: #fff;
  }
  .pp-foot {
    position: fixed;
    bottom: -0.42in;
    left: 0;
    right: 0;
    background: #fff;
    margin-top: 0;
  }

  /* Cover page stands alone, as it does in the source PDF. */
  .pp-cover {
    break-after: page;
    page-break-after: always;
  }

  .pp-section {
    break-inside: auto;
  }

  /* Repeat checklist column headers when a section spans pages — otherwise the
     C / NC / N/A columns are unlabelled from page two onward. */
  .pp-root thead {
    display: table-header-group;
  }

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