@page {
  size: A4;
  margin: 18mm 16mm 20mm;
}

:root {
  --brn-blue: #0789c9;
  --brn-red: #bd0e2d;
  --brn-ink: #1f2933;
  --brn-muted: #52606d;
  --brn-line: #aab7c4;
  --brn-pale-blue: #eaf6fc;
}

* { box-sizing: border-box; }

html, body {
  color: var(--brn-ink);
  font-family: "BRN Thai", Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
}

body { margin: 0; }

.delivery-document { width: 100%; }

.document-header {
  align-items: center;
  border-bottom: 1.5pt solid var(--brn-blue);
  display: flex;
  gap: 9mm;
  margin: 0 0 7mm;
  min-height: 22mm;
  padding: 0 0 3mm;
}

.document-header__logo {
  flex: 0 0 auto;
  height: 16mm;
  object-fit: contain;
  width: 16mm;
}

.document-header__company { flex: 1; min-width: 0; }

.document-header__company-name {
  font-size: 13pt;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0;
}

.document-header__address {
  color: var(--brn-muted);
  font-size: 7.5pt;
  line-height: 1.35;
  margin: 1mm 0 0;
}

.document-header__title {
  background: var(--brn-blue);
  color: #fff;
  font-size: 15pt;
  font-weight: 500;
  flex: 0 1 72mm;
  overflow-wrap: break-word;
  min-width: 52mm;
  padding: 4mm 6mm;
  text-align: center;
}

.document-control {
  border-collapse: collapse;
  margin: 0 0 7mm;
  page-break-inside: avoid;
  width: 100%;
}

.document-control th,
.document-control td {
  border: .5pt solid var(--brn-line);
  padding: 2mm 3mm;
  text-align: left;
  vertical-align: top;
}

.document-control th {
  background: var(--brn-pale-blue);
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
}

h1, h2, h3 { break-after: avoid; color: var(--brn-ink); }
h1 { font-size: 18pt; margin: 0 0 5mm; }
h2 { border-left: 4pt solid var(--brn-blue); font-size: 14pt; margin: 6mm 0 3mm; padding-left: 3mm; }
h3 { color: var(--brn-blue); font-size: 11.5pt; margin: 4mm 0 2mm; }

p { margin: 0 0 3mm; }

ul, ol { margin: 0 0 3.5mm; padding-left: 7mm; }
li { margin: 0 0 1mm; }

code {
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
  font-size: .9em;
  letter-spacing: 0;
}

table:not(.document-control) {
  border-collapse: collapse;
  border: .75pt solid #718096;
  break-inside: auto;
  font-size: 9pt;
  margin: 0 0 5mm;
  table-layout: auto;
  width: 100%;
}

table:not(.document-control) th,
table:not(.document-control) td {
  border: .5pt solid var(--brn-line);
  break-inside: avoid;
  overflow-wrap: break-word;
  padding: 1.6mm 2mm;
  text-align: left;
  vertical-align: top;
  word-break: normal;
}

table:not(.document-control) th { background: var(--brn-pale-blue); font-weight: 700; }

/* Column alignment carried over from the Markdown separator row. */
table:not(.document-control) th.a-right,
table:not(.document-control) td.a-right { text-align: right; }
table:not(.document-control) th.a-center,
table:not(.document-control) td.a-center { text-align: center; }

/* Short columns (IDs, dates, counts) shrink to their content instead of
   taking an equal share of the table width. */
table:not(.document-control) th.tight,
table:not(.document-control) td.tight { white-space: nowrap; width: 1%; }

thead { display: table-header-group; }
tr { break-inside: avoid; }

.approval-block__person { break-inside: avoid; margin: 0 0 6mm; }
.approval-block__person h3 { margin: 0 0 2mm; }

.approval-block__line {
  border-bottom: .5pt solid var(--brn-ink);
  display: inline-block;
  min-width: 68mm;
  vertical-align: baseline;
}

.approval-fields {
  line-height: 1.55;
  margin: 0;
  padding: 0;
}

/* Signature blocks: heading and its table stay together, in the reference layout. */
.signature-block { break-inside: avoid; margin: 0 0 5mm; }
.signature-block h2.signature-heading { border-left: none; font-size: 11pt; margin: 5mm 0 2mm; padding-left: 0; }
/* Fixed columns so the signature grid always fits the text block width. */
table.signature-table { table-layout: fixed; }
table.signature-table td { height: 13mm; }
table.signature-table th.tight,
table.signature-table td.tight { white-space: normal; width: auto; }
table.signature-table th:nth-child(1), table.signature-table td:nth-child(1) { width: 32%; }
table.signature-table th:nth-child(2), table.signature-table td:nth-child(2) { width: 26%; }
table.signature-table th:nth-child(3), table.signature-table td:nth-child(3) { width: 22%; }
table.signature-table th:nth-child(4), table.signature-table td:nth-child(4) { width: 20%; }

/* The document-control block repeats its label column, so labels must not stretch. */
.document-control th { width: 1%; }