/* ===========================================================================
   Shared printable document — used by BOTH policy.html (Save & Print on a form)
   and admin.html (submission detail modal), so the two stay visually identical.

   The document is a single fixed-size A4 page. Everything inside is sized in `em`
   so print-doc.js can shrink one root font-size and reflow the whole page down
   until it fits on ONE sheet (see fitToPage()).

   Page box = A4 minus the @page margins of the embedding document. Each page
   overrides these two vars to match its own @page rule.
   =========================================================================== */
:root {
  --pd-page-w: 182mm;   /* 210mm - 14mm - 14mm */
  --pd-page-h: 269mm;   /* 297mm - 14mm - 14mm */
  --pd-ink: #0f172a;
  --pd-line: #94a3b8;
  --pd-rule: #0f172a;
  --pd-soft: #f1f5f9;
  --pd-muted: #475569;
}

.pd-page {
  box-sizing: border-box;
  width: var(--pd-page-w);
  height: var(--pd-page-h);
  overflow: hidden;             /* the fitter guarantees nothing is actually clipped */
  background: #fff;
  color: var(--pd-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;              /* fitToPage() steps this down as needed */
  line-height: 1.35;
}
/* Inner sheet holds the layout; the fitter may scale it as a last resort. */
.pd-sheet {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
}

/* ---- Header ---- */
.pd-head {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding-bottom: 0.7em;
  border-bottom: 2px solid var(--pd-rule);
}
.pd-head .pd-logo { height: 4.2em; width: auto; object-fit: contain; }
.pd-head .pd-id { margin-left: auto; text-align: right; }
.pd-org { font-weight: 700; font-size: 1.35em; letter-spacing: 0.01em; }
.pd-kicker { font-size: 0.85em; color: var(--pd-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pd-ref { font-weight: 700; font-size: 1.1em; }
.pd-ref-label { font-size: 0.8em; color: var(--pd-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Title + meta strip ---- */
.pd-title { font-size: 1.5em; font-weight: 700; margin: 0.8em 0 0.35em; }
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4em;
  font-size: 0.85em;
  color: var(--pd-muted);
  padding-bottom: 0.8em;
  border-bottom: 1px solid #e2e8f0;
}
.pd-meta span strong { color: var(--pd-ink); font-weight: 600; }

/* ---- Field grid: two columns, long values span both ---- */
/* overflow:hidden is what makes the body's own scrollHeight report content that does not
   fit. Without it the fields would silently paint over the signature block instead, and
   fitToPage() would see no overflow to correct. */
.pd-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 0.9em; }
.pd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55em 1.1em;
  align-content: start;
}
.pd-field {
  break-inside: avoid;
  padding: 0.4em 0.6em;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--pd-line);
  border-radius: 3px;
  background: var(--pd-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pd-field.pd-wide { grid-column: 1 / -1; }
.pd-k {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pd-muted);
  margin-bottom: 0.15em;
}
.pd-v { font-size: 1em; white-space: pre-wrap; word-break: break-word; }
.pd-v:empty::after { content: "—"; color: var(--pd-line); }
.pd-v a { color: #1d4ed8; }
.pd-empty { color: var(--pd-muted); font-style: italic; }

/* A captured data-entry table renders as a real table, full width. */
.pd-tableblock { background: #fff; border-left-color: #cbd5e1; }
.pd-table { width: 100%; border-collapse: collapse; margin-top: 0.15em; }
.pd-table th, .pd-table td {
  border: 1px solid #cbd5e1;
  padding: 0.3em 0.5em;
  text-align: left;
  vertical-align: top;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-break: break-word;
}
.pd-table thead th {
  background: #eef2f7;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pd-muted);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pd-table tbody th {
  background: var(--pd-soft);
  font-weight: 600;
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pd-table td:empty::after { content: "—"; color: var(--pd-line); }

/* ---- Footer + signatures ---- */
.pd-foot { margin-top: auto; padding-top: 0.9em; }
.pd-sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.pd-sig > div {
  border-top: 1px solid var(--pd-rule);
  padding-top: 0.4em;
  font-size: 0.8em;
  color: var(--pd-muted);
  min-height: 3.2em;              /* room to sign by hand */
}
.pd-confidential {
  margin-top: 0.9em;
  padding-top: 0.5em;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.75em;
  color: var(--pd-muted);
}

/* ---- Print ---- */
@media print {
  .pd-page {
    /* The page box already equals the printable area, so no margin of its own. */
    margin: 0;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }
  .pd-field { background: var(--pd-soft) !important; }
}