/* ============================================================
   BASE — Controlled Document Design System
   One source of truth for every office / safety form.
   Change a value here and every form updates at once.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color tokens ---- */
  --ink:        #232327;   /* primary text / heavy rules   */
  --accent:     #7a1e22;   /* BASE maroon                  */
  --accent-dk:  #5a1418;   /* maroon hover                 */
  --mono:       #6f6f74;   /* mono labels / metadata       */
  --field:      #bdbdc2;   /* field box border             */
  --divider:    #cdced2;   /* light internal divider       */
  --row:        #e4e4e8;   /* table / TOC row divider      */
  --page-bg:    #e7e7ea;   /* screen background behind sheet */
  --hover:      #faf3f3;   /* row hover tint               */
  --paper:      #ffffff;

  /* ---- Type tokens ---- */
  --sans: 'Archivo', system-ui, sans-serif;
  --code: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Sheet geometry ---- */
  --sheet-w: 8.5in;
  --pad-y: 0.55in;
  --pad-x: 0.7in;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; text-wrap: pretty; }

/* ---- The page ---- */
.sheet {
  width: var(--sheet-w);
  min-height: 11in;
  margin: 0 auto 22px;
  background: var(--paper);
  box-shadow: 0 2px 26px rgba(0,0,0,.13);
  padding: var(--pad-y) var(--pad-x) 0.45in;
}

/* ============================================================
   HEADER
   ============================================================ */
.doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.doc-logo { height: 42px; display: block; width: auto; }
.doc-org {
  text-align: right;
  font: 500 8.5px/1.5 var(--code);
  color: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
/* the signature double rule */
.rule { height: 3px; background: var(--ink); margin-top: 11px; }
.rule::after {
  content: ""; display: block; height: 1px;
  background: var(--ink); margin-top: 3px;
}

.form-tag {
  font: 600 10px/1 var(--code);
  color: var(--accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 15px;
}
.form-title {
  font: 800 23px/1.04 var(--sans);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin: 7px 0 0;
}
.form-sub {
  font: 500 10px/1.4 var(--code);
  color: var(--mono);
  margin-top: 6px;
  max-width: 560px;
}

/* ---- Document-control strip ---- */
.doc-control {
  display: grid;
  grid-template-columns: repeat(var(--dc-cols, 5), 1fr);
  border: 1px solid var(--ink);
  margin-top: 14px;
}
.dc-cell { padding: 5px 8px; border-right: 1px solid var(--divider); }
.dc-cell:last-child { border-right: 0; }
.dc-label {
  font: 500 7px/1 var(--code);
  color: var(--mono);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.dc-val { font: 700 11px/1.2 var(--sans); margin-top: 3px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { margin-top: 16px; }
.section:first-of-type { margin-top: 20px; }

.sec-head {
  display: flex;
  align-items: stretch;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 10px;
}
.sec-no {
  background: var(--accent);
  color: #fff;
  font: 600 11px/1 var(--code);
  display: flex;
  align-items: center;
  padding: 0 9px;
  letter-spacing: 1px;
}
.sec-name {
  flex: 1;
  padding: 6px 11px;
  font: 700 12px/1.1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.sec-req {
  font: 500 8px/1 var(--code);
  color: var(--mono);
  align-self: flex-end;
  padding: 6px 2px;
  letter-spacing: .5px;
}

/* ============================================================
   FIELDS  (labeled write-in boxes)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--gap, 6px);
}
/* custom column ratios: add style="--tpl:2.2fr 1fr 1fr 1.3fr" */
.grid[style*="--tpl"] { grid-template-columns: var(--tpl); }

.field {
  border: 1px solid var(--field);
  min-height: var(--fh, 46px);
  padding: 5px 8px;
}
.field-label {
  font: 500 7.5px/1 var(--code);
  color: var(--mono);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.field-tall { --fh: 70px; }

/* ============================================================
   CHECK OPTIONS
   ============================================================ */
.check-box {
  border: 1px solid var(--field);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-box.cols {
  display: grid;
  grid-template-columns: repeat(var(--ccols, 2), 1fr);
  gap: 10px 14px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1.2 var(--sans);
}
.check .box {
  width: 13px; height: 13px;
  border: 1.5px solid #4c4c52;
  flex: none;
}
.dagger { color: var(--accent); font-weight: 700; }

/* ============================================================
   SIGNATURE / AUTHORIZATION ROW
   ============================================================ */
.sign-grid {
  display: grid;
  grid-template-columns: var(--sign-tpl, 2fr 1fr 1fr);
  gap: 6px;
}
.sign {
  border: 1px solid var(--field);
  min-height: 54px;
  padding: 5px 8px;
  display: flex;
  align-items: flex-end;
}
.sign .field-label { align-self: flex-start; }

/* ============================================================
   FOOTNOTES
   ============================================================ */
.footnote {
  font: 500 8px/1.5 var(--code);
  color: var(--mono);
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--field);
}

/* ============================================================
   REGISTER (index of forms)
   ============================================================ */
.formrow {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 7px 0;
  border-bottom: 1px solid var(--row);
  text-decoration: none;
  color: inherit;
}
.formrow:hover { background: var(--hover); }
.formrow .no {
  font: 700 10.5px/1 var(--code);
  color: var(--accent);
  width: 42px;
  flex: none;
}
.formrow .nm { font: 600 12px/1.3 var(--sans); }

/* ============================================================
   PRINT
   ============================================================ */
@page { size: letter; margin: 0; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0; padding: 0; background: #fff; }
  .sheet {
    width: auto; margin: 0; box-shadow: none; min-height: 0;
    padding: 0.5in 0.7in;
    break-after: page;
  }
  .section, .sec-head, .field, .check-box { break-inside: avoid; }
  .screen-only { display: none !important; }
}

/* ============================================================
   FILLABLE MODE  (typed by a person, or populated from answers JSON)
   Inputs are invisible chrome sitting inside the same boxes,
   so a filled form looks identical to a hand-written one.
   ============================================================ */
.field { display: flex; flex-direction: column; }
.fin {
  width: 100%; border: 0; background: transparent; outline: 0;
  font: 600 12px/1.35 var(--sans); color: var(--ink);
  margin-top: 4px; padding: 0; resize: none;
}
.fin::placeholder { color: transparent; }        /* keep boxes clean when blank */
.sign { flex-direction: column; align-items: stretch; justify-content: space-between; }
.sign .fin { margin-top: auto; }

/* clickable check options */
.check { cursor: pointer; user-select: none; }
.check .box { transition: background .08s; }
.check.on .box { background: var(--accent); border-color: var(--accent); }

/* screen-only toolbar */
.bar {
  width: 8.5in; margin: 0 auto 14px; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center;
  font: 500 11px/1 var(--code);
}
.bar .home { color: var(--accent); text-decoration: none; margin-right: auto; }
.bar button {
  font: 600 10px/1 var(--code); letter-spacing: .4px; text-transform: uppercase;
  padding: 8px 11px; border: 1px solid var(--ink); background: #fff; color: var(--ink);
  cursor: pointer;
}
.bar button:hover { background: var(--ink); color: #fff; }
.panel {
  width: 8.5in; margin: 0 auto 14px; border: 1px solid var(--field); background: #fff; padding: 12px;
}
.panel textarea {
  width: 100%; min-height: 150px; border: 1px solid var(--field);
  font: 500 11px/1.5 var(--code); color: var(--ink); padding: 8px;
}
.panel .hint { font: 500 10px/1.5 var(--code); color: var(--mono); margin: 0 0 8px; }
@media print { .bar, .panel { display: none !important; } }

/* ============================================================
   FILL MODE  — real inputs, styled to match the paper form
   ============================================================ */
.field { display: flex; flex-direction: column; }
.fin, .ftx {
  width: 100%; border: 0; background: transparent; outline: none;
  font: 600 12px/1.35 var(--sans); color: var(--ink);
  margin-top: 5px; padding: 0; resize: none;
}
.ftx { flex: 1; min-height: 34px; }
.field:focus-within, .sign:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sign .fin { margin-top: 0; }

/* interactive check / radio reuses the .box look */
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check input:checked + .box {
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px #fff;
}
.check input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { cursor: pointer; }

/* per-form toolbar (screen only) */
.toolbar {
  width: 8.5in; margin: 0 auto 10px; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.toolbar .sp { flex: 1; }
.btn {
  font: 600 11px/1 var(--code); letter-spacing: .3px;
  padding: 9px 13px; border: 1px solid var(--ink); background: #fff;
  color: var(--ink); cursor: pointer; text-transform: uppercase;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-dk); }
.btn.ghost { border-color: var(--field); color: var(--mono); }

@media print { .toolbar { display: none !important; } }

/* ============================================================
   DOCUMENTS  (manuals, policies, guides, memos)
   ============================================================ */
.cover { min-height: 9.6in; display: flex; flex-direction: column; }
.cover-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }
.cover-title {
  font: 800 52px/0.98 var(--sans);
  letter-spacing: .5px; text-transform: uppercase; margin: 16px 0 0;
}
.cover-bar { width: 160px; height: 3px; background: var(--accent); margin: 26px 0; }
.cover-sub { font: 700 15px/1.5 var(--sans); letter-spacing: .3px; }
.cover-standard { font: 500 11px/1.7 var(--code); color: var(--mono); margin-top: 16px; max-width: 540px; }
.cover-auth {
  margin-top: 13px; padding-top: 8px; border-top: 1px solid var(--field);
  font: 500 8px/1.3 var(--code); color: var(--mono);
  text-transform: uppercase; letter-spacing: .6px;
}

.eyebrow { font: 600 10px/1 var(--code); color: var(--accent); letter-spacing: 3px; text-transform: uppercase; }
.doc-eyebrow-wrap { margin-top: 22px; }
.doc-h2 { font: 800 24px/1.04 var(--sans); letter-spacing: .3px; text-transform: uppercase; margin: 8px 0 0; }

/* larger section bar inside documents */
.section.big { margin-top: 30px; }
.section.big .sec-no { font-size: 12px; padding: 0 11px; }
.section.big .sec-name { font-size: 14px; letter-spacing: 1.4px; padding: 8px 12px; }

.prose { font: 400 13px/1.6 var(--sans); color: #33333a; margin-bottom: 11px; }
.prose:last-child { margin-bottom: 0; }

.pull { border-left: 4px solid var(--accent); padding: 6px 0 6px 18px; margin: 18px 0; }
.pull-q { font: 700 21px/1.25 var(--sans); color: var(--ink); }
.pull-a { font: 500 9px/1.4 var(--code); color: var(--mono); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }

.note { border: 1px solid var(--field); border-left: 4px solid var(--ink); padding: 11px 14px; margin: 16px 0; }
.note-t { font: 700 10px/1 var(--code); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 6px; }
.note-b { font: 400 12px/1.55 var(--sans); color: #33333a; }

.signatory { margin-top: 22px; }
.sig-name { font: 700 15px/1.2 var(--sans); }
.sig-role { font: 500 9px/1.4 var(--code); color: var(--mono); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

.dtable { width: 100%; border-collapse: collapse; margin: 16px 0; }
.dtable th {
  text-align: left; font: 700 8px/1.2 var(--code); text-transform: uppercase; letter-spacing: .6px;
  color: #fff; background: var(--ink); padding: 7px 9px;
}
.dtable td { font: 400 11.5px/1.4 var(--sans); padding: 7px 9px; border-bottom: 1px solid var(--row); }

.toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 20px; }