/* Documents filled out on top of their PDF: agreements, forms, policies, the public signing and application pages.
   Colours come from the variables in styles.css, with one exception: a PDF page is paper and stays white in both
   modes (styles.css, "documents that are paper stay paper"), so what is drawn ON the page keeps the fixed ink and
   marker colours named here once. */
.sign-doc, dialog.sigpad, .ff-row.sig {
  --pdf-paper: #FFFFFF;
  --pdf-ink: #0B1F4A;                   /* what is typed and signed on the page */
  --pdf-box: rgba(26, 115, 232, .6);    /* the edge of a box to fill in */
  --pdf-fill: rgba(255, 244, 150, .35);
  --pdf-need: #C60C30;                  /* a required box still empty */
  --pdf-pick: #FFB612;                  /* the box in hand: focused, selected */
  --pdf-pick-glow: rgba(255, 182, 18, .3);
  --pdf-other: rgba(200, 60, 30, .85);  /* the editor: a box Steel City Electric fills */
  --pdf-rule: #C9CED6;
  --pdf-note: #555D65;                    /* small print on the page: the page number, a box's placeholder */
  --pdf-box-tint: rgba(26, 115, 232, .08);
  --pdf-other-tint: rgba(200, 60, 30, .08);
  --pdf-locked: rgba(0, 0, 0, .3);
  --pdf-tag: #101820;                     /* the editor: a box's name tag and resize handle */
  --pdf-on-tag: #FFFFFF;
}

/* ── Shared: document with field overlay ─────────── */
.sign-doc { display: grid; gap: 14px; min-width: 0; }
.sign-page { position: relative; background: var(--pdf-paper); border: 1px solid var(--rule-strong); overflow: hidden; container-type: inline-size; }
.sign-page canvas { display: block; width: 100%; }
.sign-page .overlay { position: absolute; inset: 0; }
.sign-page .page-no { position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: var(--pdf-note); background: var(--pdf-paper); opacity: .9; padding: 0 5px; pointer-events: none; }
/* The type size: fixed where container units are not known, else a share of the page's width (set per box) */
.fld { position: absolute; box-sizing: border-box; font-size: var(--fs, 11pt); }
@supports (font-size: 1cqw) { .fld { font-size: clamp(7px, calc(var(--fsw, 1.8) * 1cqw), 18px); } }
.fld.editable { outline: 2px solid var(--pdf-box); outline-offset: 1px; background: var(--pdf-fill); }
.fld.editable.required:not(.filled) { outline-color: var(--pdf-need); }
.fld.editable.required:not(.filled)::after { content: "*"; position: absolute; right: 1px; top: -2px; color: var(--pdf-need); font: 700 13px/1 var(--body); pointer-events: none; }
.fld.editable:focus-within { outline: 3px solid var(--pdf-pick); box-shadow: 0 0 0 5px var(--pdf-pick-glow); z-index: 2; }
.fld.flash { animation: fldflash 1.2s ease-out; z-index: 2; }
@keyframes fldflash { 0% { box-shadow: 0 0 0 10px var(--pdf-pick); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .fld.flash { animation: none; outline: 3px solid var(--pdf-pick); } }
.fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld textarea { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 3px; font: inherit; font-size: inherit; color: var(--pdf-ink); min-height: 0; border-radius: 0; box-shadow: none; }
.fld textarea { display: block; padding: 2px 3px; line-height: 1.25; resize: none; overflow-y: auto; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--pdf-note); opacity: .75; }
.fld input:focus, .fld textarea:focus { outline: none; }   /* the box around it shows the focus */
.fld .chk { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
.fld .chk input { width: 90%; height: 90%; margin: 0; min-height: 0; padding: 0; accent-color: var(--pdf-ink); cursor: pointer; }
.fld .chk input:focus { outline: none; }
.fld .sign-btn { width: 100%; height: 100%; border: 0; background: var(--hivis); color: var(--on-hivis); font-weight: 700; font-size: inherit; border-radius: 0; cursor: pointer; padding: 0 4px; min-height: 0; white-space: nowrap; overflow: hidden; justify-content: center; }
.fld .sign-btn:focus-visible, .fld .redo:focus-visible { outline: none; }
.fld img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.fld .redo { position: absolute; right: -2px; top: -2px; width: 20px; height: 20px; min-height: 0; padding: 0; border: 1px solid var(--pdf-rule); border-radius: 0; background: var(--pdf-paper); color: var(--pdf-ink); font-size: 12px; line-height: 1; cursor: pointer; justify-content: center; }
.fld.locked { outline: 1px dashed var(--pdf-locked); }
/* A form's box that is the office's to fill in (Form I-9 Section 2): shown greyed to the person filling the form out */
.fld.locked.shown { background: rgba(0, 0, 0, .07); cursor: not-allowed; }
/* The line over the page where an attached form starts: "Form I-9: not required to submit ..." */
.sign-doc .page-note { margin: 10px 0 4px; padding: 6px 10px; border-left: 4px solid var(--pdf-pick); background: var(--pdf-paper); color: var(--pdf-ink); font: 700 14px/1.3 var(--body); }
.fld.locked .tag { display: none; }
.sign-doc.show-tags .fld.locked .tag { display: inline-block; }
/* editor: boxes are moved, resized and drawn; each is a button (Tab, Enter, arrow keys) */
.sign-doc.editing .fld { outline: 1.5px solid var(--pdf-box); background: var(--pdf-box-tint); cursor: move; touch-action: none; }
.sign-doc.editing .fld.company { outline-color: var(--pdf-other); background: var(--pdf-other-tint); }
.sign-doc.editing .fld:focus-visible { outline: 3px solid var(--pdf-pick); z-index: 2; }
.sign-doc.editing .fld.selected { outline: 3px solid var(--pdf-pick); box-shadow: 0 0 0 4px var(--pdf-pick-glow); z-index: 3; }
/* a box's name shows for the one in hand, so the names of a dense form do not cover each other */
.sign-doc.editing .tag { display: none; position: absolute; left: 0; top: -17px; font: 600 10px/14px var(--body); background: var(--pdf-tag); color: var(--pdf-on-tag); padding: 1px 5px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sign-doc.editing .fld.selected .tag, .sign-doc.editing .fld:hover .tag, .sign-doc.editing .fld:focus-visible .tag { display: block; }
.sign-doc.editing .grip { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--pdf-paper); border: 2px solid var(--pdf-tag); cursor: nwse-resize; touch-action: none; }
.sign-doc.drawing .overlay { cursor: crosshair; touch-action: none; }

/* signature pad */
dialog.sigpad { border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: 0; width: min(560px, 94vw); background: var(--surface); color: var(--ink); box-shadow: 0 16px 48px var(--shadow); }
dialog.sigpad::backdrop { background: var(--shadow); background: color-mix(in srgb, var(--side-bg) 62%, transparent); }
dialog.sigpad form { padding: 16px 18px 14px; display: grid; gap: 12px; }
dialog.sigpad h2 { margin: 0; font-size: 18px; }
dialog.sigpad .tabs { display: flex; gap: 6px; }
dialog.sigpad .tab { padding: 6px 14px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); border-radius: var(--r-pill); font-weight: 600; }
dialog.sigpad .tab.on { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
dialog.sigpad canvas { width: 100%; aspect-ratio: 3 / 1; background: var(--pdf-paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); touch-action: none; background-image: linear-gradient(var(--pdf-rule), var(--pdf-rule)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 72%; }
dialog.sigpad .hint { font-size: 13px; color: var(--steel); }
dialog.sigpad .typed { width: 100%; font-size: 18px; }
dialog.sigpad .preview { font-family: Caveat, "Segoe Script", "Brush Script MT", cursive; font-size: 54px; min-height: 80px; color: var(--pdf-ink); background: var(--pdf-paper); padding: 6px 10px; border-bottom: 1px solid var(--pdf-rule); overflow: hidden; white-space: nowrap; }
dialog.sigpad .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
dialog.sigpad .grow { flex: 1; }

/* ── Public signing page ─────────────────────────── */
.sign-body { background: var(--paper); margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
.sign-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 3px solid var(--hivis); }
.sign-head .logo { height: 40px; }
.sign-head .who { display: flex; flex-direction: column; line-height: 1.2; }
.sign-head .who span { color: var(--steel); font-size: 13px; }
.sign-main { flex: 1; width: min(900px, 100%); margin: 0 auto; padding: 16px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sign-main .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 16px 18px; min-width: 0; }
.sign-main h1 { margin: 0 0 8px; font-size: 22px; }
.sign-main blockquote { margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--hivis); background: var(--tint-hivis-soft); }
.sign-main .loading, .sign-main .problem { text-align: center; padding: 40px 20px; }
.sign-main .finish { position: sticky; bottom: 8px; box-shadow: 0 -6px 24px var(--shadow); display: grid; gap: 12px; }
.sign-main .progress-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sign-main .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; line-height: 1.4; }
.sign-main .consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }
.sign-main .typed-name { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.sign-main .typed-name input { font-weight: 400; font-size: 16px; }
.sign-main .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sign-main .err { color: var(--signal); font-weight: 600; margin: 0; }
.sign-main .done h1 { color: var(--go); }
.sign-foot { text-align: center; color: var(--steel); font-size: 12px; padding: 14px; }
button.link, .btn.link { background: none; border: 0; color: var(--info); text-decoration: underline; padding: 6px; min-height: 0; cursor: pointer; }

/* ── The list beside the document (fieldForm in esign-overlay.js), in step with the boxes on the page ── */
.ff-page { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 2px 12px 8px; margin: 0 0 12px; min-width: 0; }
.ff-page:last-child { margin-bottom: 0; }
.ff-page legend { font: 700 13px var(--body); color: var(--steel); padding: 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.ff-head { margin: 10px -12px 0; padding: 4px 12px; background: var(--hover); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 600 13px var(--body); letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.ff-head + .ff-row { border-top: 0; }
.ff-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; min-width: 0; }
.ff-page > legend + .ff-row { border-top: 0; }
.ff-row .lab { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.ff-row .req { color: var(--signal); font-weight: 700; text-decoration: none; cursor: help; }
.ff-row input[type=text], .ff-row input[type=email], .ff-row input[type=tel], .ff-row textarea { width: 100%; font-size: 16px; font-weight: 400; }
.ff-row textarea { min-height: 76px; }
.ff-row input[type=checkbox] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; padding: 0; }
.ff-row.check { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 500; min-height: 36px; cursor: pointer; overflow-wrap: anywhere; }
.ff-opts { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.ff-opt { display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 36px; font-size: 14px; font-weight: 500; cursor: pointer; }
.ff-row.sig { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab btn" "box btn"; align-items: center; column-gap: 10px; }
.ff-row.sig .lab { grid-area: lab; } .ff-row.sig .sigbox { grid-area: box; min-height: 34px; background: var(--pdf-paper); border-bottom: 1px solid var(--rule-strong); } .ff-row.sig .ff-sign { grid-area: btn; }
.ff-row.sig .sigbox img { height: 40px; max-width: 100%; object-fit: contain; display: block; }
.sign-main .fill h2 { font-size: 17px; margin: 0 0 4px; }

/* ── Forms and policies in the portal (public/js/views-forms.js) ── */
/* The column beside the document scrolls on its own, so a long list of boxes is never cut off under the window */
@media (min-width: 961px) { .esign-split aside { max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; align-content: start; } }
/* On a phone the page and the column under it are never wider than the screen, and the list of boxes comes before
   the box that submits them */
.esign-split aside { min-width: 0; }
@media (max-width: 960px) { .esign-split { grid-template-columns: minmax(0, 1fr); } .esign-split aside .fill-submit { order: 2; } }
.fill-progress { display: grid; gap: 4px; }
.fill-progress progress { display: block; width: 100%; height: 8px; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--field); accent-color: var(--go); -webkit-appearance: none; appearance: none; }
.fill-progress progress::-webkit-progress-bar { background: var(--field); }
.fill-progress progress::-webkit-progress-value { background: var(--go); }
.fill-progress progress::-moz-progress-bar { background: var(--go); }
.fill-progress p { margin: 0; font-size: 14px; }
.fill-progress .left { color: var(--signal); font-weight: 600; }
.fill-consent { margin: 0; font-size: 13px; color: var(--steel); }
/* the box editor: where a box is and how big, in points */
.box-geo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.box-geo label { font-size: 12px; }
.box-geo input { padding: 5px 6px; min-height: 34px; font-size: 14px; font-variant-numeric: tabular-nums; }
.box-list-page { margin: 0; padding: 4px 12px; background: var(--hover); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 700 12px var(--body); letter-spacing: .03em; text-transform: uppercase; color: var(--steel); }
.box-list-page:first-child { border-top: 0; }
.rows.compact button.row { color: var(--ink); min-height: 0; }
.rows.compact button.row:hover { background: var(--hover); }
.rows.compact button.row[aria-current="true"] { background: var(--tint-hivis); box-shadow: inset 4px 0 0 var(--hivis); }
.rows.compact button.row .title, .rows.compact button.row .meta { overflow-wrap: anywhere; }
/* a submitted form: what was answered, as text (the PDF under it is the record) */
dl.answers { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; margin: 0; }
dl.answers dt, dl.answers dd { margin: 0; padding: 6px 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
dl.answers dt { color: var(--steel); padding-right: 14px; }
dl.answers dt:first-of-type, dl.answers dt:first-of-type + dd { border-top: 0; }
.ans-head { margin: 12px 0 2px; font: 700 12px var(--body); letter-spacing: .03em; text-transform: uppercase; color: var(--steel); overflow-wrap: anywhere; }
.ans-head:first-child { margin-top: 0; }
@media (max-width: 560px) { dl.answers { grid-template-columns: minmax(0, 1fr); } dl.answers dt { padding-bottom: 0; } dl.answers dd { border-top: 0; padding-top: 0; } }

/* ── A new employee's application by link (/apply, public/js/apply.js) ── */
.apply-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.apply-choices button, .apply-choices .btn { width: 100%; min-height: 56px; padding: 12px 16px; font-size: 17px; justify-content: center; text-align: center; box-sizing: border-box; }
.apply-choices p { margin: 6px 0 0; font-size: 13px; color: var(--steel); }
.apply-note { margin: 14px 0 8px; padding: 10px 12px; border-left: 4px solid var(--signal); background: var(--tint-signal); font-weight: 700; }
.apply-body .finish .actions .big, .sign-main .finish .actions .big { min-height: 52px; padding: 12px 22px; font-size: 17px; }
.apply-body .finish p { margin: 0; }
@media (max-width: 560px) { .apply-choices { grid-template-columns: 1fr; } }

/* ── A form filled in stages (the Incident Report): who fills it in, where it is, and its steps ── */
.stage-flow { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: stage; }
.stage-flow li { counter-increment: stage; padding: 5px 12px 5px 10px; border: 1px solid var(--rule); margin: 0 -1px -1px 0; font: 600 13px var(--body); color: var(--steel); }
.stage-flow li::before { content: counter(stage) ". "; }
.stage-flow li.done { color: inherit; }
.stage-flow li.on { background: var(--tint-hivis); box-shadow: inset 0 -3px 0 var(--hivis); color: inherit; }
.stage-steps { margin: 4px 0 0; padding-left: 20px; }
.stage-steps li { padding: 3px 0; overflow-wrap: anywhere; }
.meta.stage-line { font-weight: 600; }