/* =====================================================================
   Petrolex printable forms
   ---------------------------------------------------------------------
   One stylesheet for every document under /documents. These pages are
   meant to leave the screen: the layout is letter-width, the ink is
   black on white, and the watermark is a real background image so it
   survives "Save as PDF" as long as the browser is printing
   backgrounds. Screen view mirrors the printed page so what a customer
   sees is what they get.
   ===================================================================== */

:root {
  --ink: #101114;
  --muted: #5b6169;
  --rule: #b9bec6;
  --red: #c8102e;
  --tint: #f3f4f6;
}

* { box-sizing: border-box; }

html { background: #6b7078; }

body {
  margin: 0;
  padding: 24px 12px 60px;
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: var(--ink);
}

/* The sheet itself — 8.5in wide with a 0.6in margin, i.e. letter paper. */
.sheet {
  position: relative;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0.6in;
  background: #fff url("../assets/watermark-light.png") no-repeat center center;
  background-size: 62% auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

/* A second sheet in the same document starts a new printed page. */
.sheet + .sheet { margin-top: 24px; page-break-before: always; }

/* ------------------------------------------------------------ letterhead */

.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 12px;
}

.doc-head img { width: 132px; height: auto; }

.doc-org {
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
  text-align: right;
}

.doc-org strong { display: block; color: var(--ink); font-size: 12px; letter-spacing: 0.04em; }

.doc-title {
  margin: 18px 0 4px;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-sub { margin: 0 0 18px; font-size: 11px; color: var(--muted); }

/* Form number / revision strip, top right of the title block. */
.doc-code {
  float: right;
  margin-top: 18px;
  border: 1px solid var(--rule);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

h2.sec {
  margin: 20px 0 8px;
  padding: 5px 8px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h3.sub {
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

p { margin: 0 0 9px; }
ol, ul { margin: 0 0 10px; padding-left: 20px; }
li { margin-bottom: 5px; }

.note {
  border-left: 3px solid var(--red);
  background: var(--tint);
  padding: 8px 10px;
  font-size: 11px;
}

.tiny { font-size: 10px; color: var(--muted); }

/* ------------------------------------------------------- fill-in fields */

/* Fields are ruled lines, not inputs: these forms are printed and signed.
   A .field is a label above a writing line; .wide spans the whole row. */
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.rows.three { grid-template-columns: 1fr 1fr 1fr; }
.rows .wide { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.line { border-bottom: 1px solid var(--ink); height: 20px; }
.line.tall { height: 42px; }
.line.taller { height: 74px; }

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

table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }

th, td {
  border: 1px solid var(--rule);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--tint);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

td.blank { height: 24px; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 700; background: var(--tint); }
tr.total.due td { color: var(--red); }

/* Tick boxes for checklists. */
.box {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
  margin-right: 5px;
}

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; margin-bottom: 12px; }
.checks.three { grid-template-columns: 1fr 1fr 1fr; }
.checks span { font-size: 11px; }

/* ------------------------------------------------------------ signatures */

.signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 26px;
  page-break-inside: avoid;
}

.sign .sign-line { border-bottom: 1px solid var(--ink); height: 40px; }

.sign small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------- footer */

.doc-foot {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--muted);
}

.doc-foot strong { color: var(--ink); }

/* ------------------------------------------------- on-screen toolbar only */

.toolbar {
  width: 8.5in;
  max-width: 100%;
  margin: 0 auto 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 11px;
}

.toolbar a, .toolbar button {
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  padding: 8px 14px;
}

.toolbar button.primary { background: var(--red); border-color: var(--red); }
.toolbar .spacer { flex: 1 1 auto; }

@media print {
  html, body { background: #fff; }
  body { padding: 0; }
  .toolbar { display: none; }
  .sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    /* Chrome only paints this when "Background graphics" is enabled; the
       letterhead logo carries the branding either way. */
    background-size: 68% auto;
  }
  .sheet + .sheet { margin: 0; }
  a { color: inherit; text-decoration: none; }
  @page { size: letter; margin: 0.6in; }
}

@media (max-width: 8.9in) {
  .sheet, .toolbar { width: 100%; }
  .sheet { padding: 22px; }
  .rows, .rows.three, .checks, .checks.three, .signs { grid-template-columns: 1fr; }
  .doc-head { flex-direction: column; }
  .doc-org { text-align: left; }
}