/* ═════════════════════ Checklist Document Stylesheet ═════════════════════
 * THE single source of truth for how a designed checklist LOOKS.
 * Loaded once (index.html) and applied to ALL THREE surfaces:
 *   1. Designer canvas   (.ckd-canvas gets class "ckdoc")
 *   2. View/Preview      (renderPagedHtml sheets carry "ckdoc")
 *   3. Run / fill form   (renderFillView wrap carries "ckdoc")
 * Because every surface renders the SAME classes with the SAME values here,
 * canvas = preview = run by construction. Do NOT restyle these classes in
 * index.html or designer.css — designer.css may only add editing chrome
 * (selection outlines, drag handles) that never changes layout metrics.
 * All units are px on a 794px A4 sheet (210mm @96dpi), like the canvas.
 * ══════════════════════════════════════════════════════════════════════ */

.ckdoc {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #111;
  line-height: 1.45;
}

/* A4 sheet — identical geometry on every surface (canvas uses .ckd-canvas
   with the same 794px/40px 44px/min-height:1123px values). */
.ckdoc .ckl-run-a4-wrap,
.ckdoc.ckl-run-a4-wrap { background: #e5e7eb; padding: 22px 12px; }
.ckdoc .ckl-run-a4-page,
.ckdoc.ckl-run-a4-page {
  width: 794px;
  max-width: 100%;
  min-height: 1123px;
  background: #fff;
  margin: 0 auto 22px;
  padding: 40px 44px;
  box-sizing: border-box;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
  border-radius: 2px;
  position: relative;
}
.ckdoc .ckl-run-a4-page:last-child { margin-bottom: 0; }
.ckdoc .ckl-run-a4-foot { position: absolute; bottom: 16px; right: 20px; font-size: 10px; color: #9ca3af; }
@media (max-width: 860px) {
  .ckdoc .ckl-run-a4-page { min-height: 0; padding: 20px 16px; }
}

/* ── Page header / footer (Word-style, repeats on every A4 sheet) ──
   Drawn inside the sheet's 40px top/bottom padding zone (absolute), so it
   never moves the designed content. Same on canvas/preview/run/PDF. */
.ckdoc .ckl-page-header {
  position: absolute;
  top: 5px;
  left: 44px;
  right: 44px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
/* max-height is overridden inline when the author sets a header height,
   so the logo grows with the band instead of staying 26px. */
.ckdoc .ckl-page-header-logo { max-height: 26px; max-width: 220px; object-fit: contain; display: block; }
.ckdoc .ckl-page-header-text { font-size: 12px; flex: 0 1 auto; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckdoc .ckl-page-footer {
  position: absolute;
  bottom: 14px;
  left: 44px;
  right: 130px;
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Block rhythm — every top-level block on every surface: 6px vertical margin
   (inline-block flow, margins don't collapse → 12px between blocks, same as
   the canvas .ckd-block). Free (absolutely-positioned) blocks ignore margin. */
.ckdoc .ckdoc-block { margin: 6px 0; }

/* ── Content blocks ── */
.ckdoc .ckl-run-content-heading { font-size: 22px; font-weight: 700; color: #111; min-height: 1.3em; }
.ckdoc .ckl-run-content-text { font-size: 15px; line-height: 1.5; color: #111; min-height: 1.3em; }
.ckdoc .ckl-run-divider { border: none; border-top: 1.5px solid #d4d4d8; margin: 8px 0; }
.ckdoc .ckl-run-image { display: block; border-radius: 2px; }

.ckdoc .ckl-run-pagebreak { position: relative; text-align: center; border-top: 2px dashed #94a3b8; margin: 14px 0 8px; }
.ckdoc .ckl-run-pagebreak span { position: relative; top: -10px; display: inline-block; background: #fff; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #64748b; text-transform: uppercase; }

/* Section — same visible box on all surfaces. */
.ckdoc .ckl-run-section-block { border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 12px 8px; box-sizing: border-box; }
.ckdoc .ckl-run-v2-section-title { font-size: 17px; font-weight: 700; color: #111; margin: 0 0 6px; min-height: 1.3em; }
.ckdoc .ckl-run-section-children { min-height: 10px; }

/* ── Table ── */
.ckdoc .ckl-run-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
/* NB: the td border itself is emitted INLINE by the shared cellStyle()
   helper (prop-driven: table border width/color are author-configurable),
   identically on every surface. Only the paddings/alignment live here. */
/* table-layout:fixed sets the column WIDTH, but a cell whose content cannot
   shrink still paints outside it. These keep a wide control (a signature's
   pad + dropdown + buttons) inside its own column instead of appearing to
   overlap the next one. */
.ckdoc .ckl-run-table td { padding: 6px 8px; vertical-align: top; overflow: hidden; word-break: break-word; }
/* Every cell text line (including an EMPTY one) reserves exactly ONE line
   box (min-height = line-height 1.4em): the canvas's empty contenteditable
   cell renders a full caret line, so the plain preview/run div must too —
   otherwise empty rows are ~2px shorter than the canvas. No :empty collapse. */
/* INHERIT, don't hard-code: the cell's own font-size is emitted on the <td> by
   cellStyle() from cell.fontSize. A fixed 14px here silently beat it, so the
   Font size control in the table toolbar appeared to do nothing. The <td>
   carries 14px by default (.ckl-run-table), so unset cells are unchanged, and
   min-height stays 1.4em so the reserved line box scales with the text. */
.ckdoc .ckl-run-cell-text { font-size: inherit; line-height: 1.4; min-height: 1.4em; }

/* ── Fields (label + control on one flowing line, like a paper form) ── */
.ckdoc .ckl-fld {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
  max-width: 100%;
}
.ckdoc .ckl-run-field-label { font-weight: 600; color: #111; }
.ckdoc .ckl-run-field-required { color: #dc2626; margin-left: 2px; font-weight: 700; }
.ckdoc .ckl-run-field-unit { font-size: 13px; color: #6b7280; font-weight: 600; }

/* ☐/☑ choice boxes — identical glyph boxes on all surfaces; tappable in run. */
.ckdoc .ckl-run-optgroup { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ckdoc .ckl-run-optbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 6px;
  min-height: 26px;
  user-select: none;
  white-space: nowrap;
}
.ckdoc .ckl-run-optbox:hover { background: #f4faf4; }
.ckdoc .ckl-static .ckl-run-optbox,
.ckdoc.ckl-static .ckl-run-optbox { cursor: default; }
.ckdoc .ckl-static .ckl-run-optbox:hover,
.ckdoc.ckl-static .ckl-run-optbox:hover { background: transparent; }
.ckdoc .ckl-run-optbox-glyph { font-size: 15px; line-height: 1; }
.ckdoc .ckl-run-optbox.ckl-run-optbox-selected { font-weight: 700; }
.ckdoc .ckl-run-optbox.ckl-run-optbox-selected[data-kind="pass"] { color: var(--ok); }
.ckdoc .ckl-run-optbox.ckl-run-optbox-selected[data-kind="fail"] { color: #dc2626; }
.ckdoc .ckl-run-optbox.ckl-run-optbox-selected[data-kind="na"] { color: #6b7280; }
@media (max-width: 700px) { .ckdoc .ckl-run-optbox { min-height: 32px; } }

/* Paper-form underline inputs (run) and their static twins (canvas/preview) —
   SAME width and underline so the geometry matches 1:1. */
.ckdoc .ckl-run-field-input {
  padding: 2px 3px;
  border: none;
  border-bottom: 1.5px solid #999;
  border-radius: 0;
  background: transparent;
  color: #111;
  font-size: 14px;
  font-family: inherit;
  min-width: 110px;
  max-width: 170px;
  box-sizing: border-box;
}
.ckdoc .ckl-run-field-input:focus { outline: none; border-bottom-color: var(--brand); }
.ckdoc .ckl-run-line {
  display: inline-block;
  min-width: 110px;
  max-width: 170px;
  border-bottom: 1.5px solid #999;
  height: 1.25em;
  box-sizing: border-box;
  vertical-align: baseline;
}
.ckdoc .ckl-run-line-sm { min-width: 90px; }
.ckdoc .ckl-run-line-answer { font-size: 14px; height: auto; min-height: 1.25em; padding: 0 3px; }

.ckdoc .ckl-run-field-remark {
  width: 130px;
  padding: 2px 3px;
  border: none;
  border-bottom: 1.5px dashed #bbb;
  border-radius: 0;
  background: transparent;
  color: #111;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.ckdoc .ckl-run-field-remark:focus { outline: none; border-bottom-color: var(--brand); }
.ckdoc .ckl-run-remark-hint { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.ckdoc .ckl-run-remark-hint .ckl-run-line { min-width: 90px; border-bottom: 1.5px dashed #bbb; }
.ckdoc .ckl-run-photo-hint { font-size: 14px; color: #9ca3af; }

.ckdoc .ckl-run-field-photo { display: inline-flex; align-items: center; gap: 4px; }
.ckdoc .ckl-run-field-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid #d4d4d8;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ckdoc .ckl-run-field-photo-btn:hover { border-color: var(--brand); }
.ckdoc .ckl-run-field-photo-btn input[type=file] { display: none; }
.ckdoc .ckl-run-field-thumbs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ckdoc .ckl-run-field-thumbs .ckl-run-thumb { width: 30px; height: 30px; }

.ckdoc .ckl-run-field-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ckdoc .ckl-run-field-badges:empty { display: none; }
.ckdoc .ckl-run-field-badges .ckl-run-badge { font-size: 10px; padding: 1px 6px; }

/* Validation error highlight (ckRevalidateRun toggles this class). */
.ckdoc .ckl-run-field.ckl-run-qcard-error { outline: 2px solid #dc2626; outline-offset: 2px; border-radius: 4px; }
.ckdoc .ckl-run-field.ckl-run-qcard-error .ckl-run-field-label { color: #b91c1c; }

/* ── Compact fields (inside table cells) ──
   A field dropped into a table cell has to live inside the column width the
   author chose, but the signature pad is a fixed 260x80 plus a name row and a
   button row (~184px tall) — in a 3-up signature strip that overflows the cell
   and the boxes read as overlapping. props.compact (renderer.js) adds this
   class: the pad fills the cell width instead of forcing 260px, loses a third
   of its height, and the surrounding controls shrink to match. The field is
   still fully usable — you can still draw, save and clear. */
/* Stack vertically and clip: a table cell is a hard width budget, and the RUN
   screen puts MORE inside a signature than the canvas does (signer dropdown,
   draw pad, Save/Clear, "waiting for previous signature"). As inline-flex with
   fixed-width children those overflow sideways and visually land in the next
   column, which reads as overlapping signature boxes. */
.ckdoc .ckl-fld-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  gap: 3px;
  min-width: 0;      /* a flex item must be allowed to shrink below its content */
  overflow: hidden;  /* nothing escapes into the neighbouring cell */
}
.ckdoc .ckl-fld-compact > *,
.ckdoc .ckl-fld-compact .ckl-sig-wrap { max-width: 100%; min-width: 0; }
.ckdoc .ckl-fld-compact .ckl-sig-wrap { display: block; width: 100%; }
/* Compact fits the cell by default, but an inline width/height set by the
   author (props.sigWidth/sigHeight) must win — hence no !important here, and
   max-width keeps an oversized box from breaking out of its column. */
.ckdoc .ckl-fld-compact .ckl-sig-pad,
.ckdoc .ckl-fld-compact .ckl-sig-box { width: 100%; height: 52px; max-width: 100%; }
/* The name input AND the pick-a-person <select> both have to fit the column. */
.ckdoc .ckl-fld-compact .ckl-sig-name,
.ckdoc .ckl-fld-compact .ckl-sig-name-pick,
.ckdoc .ckl-fld-compact .ckl-sig-name-other,
.ckdoc .ckl-fld-compact .ckl-run-field-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 12px;
}
/* Save / Clear / lock notice wrap onto their own line instead of pushing the
   row wider than the cell. */
.ckdoc .ckl-fld-compact .ckl-sig-actions { flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ckdoc .ckl-fld-compact .ckl-sig-save,
.ckdoc .ckl-fld-compact .ckl-sig-clear { padding: 1px 7px; font-size: 11px; }
.ckdoc .ckl-fld-compact .ckl-sig-hint,
.ckdoc .ckl-fld-compact .ckl-sig-ts,
.ckdoc .ckl-fld-compact .ckl-sig-geo { font-size: 10px; flex: 1 0 100%; margin: 0; padding: 2px 4px; line-height: 1.3; }
.ckdoc .ckl-fld-compact .ckl-sig-line { min-width: 0; max-width: 100%; width: 100%; height: 24px; }
/* Keep the ☐ Yes ☐ No pair on ONE line even in a narrow column — a wrapped
   option group doubles the row height and stops matching the paper form. */
.ckdoc .ckl-fld-compact .ckl-run-optgroup { flex-wrap: nowrap; gap: 8px; }

/* ── Signature field (run: draw pad; static: sign-line) ── */
/* Shared signature footprint — the draw pad (run) and the static box
   (canvas/preview) are the SAME 260×80 size, so the designed A4 layout
   reserves exactly the space the run will use (WYSIWYG: design = run). */
.ckdoc .ckl-sig-field { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: top; }
.ckdoc .ckl-sig-name { max-width: 260px; }
.ckdoc .ckl-sig-name-auto { font-size: 13px; color: #374151; font-weight: 600; }
.ckdoc .ckl-sig-wrap { display: inline-block; }
.ckdoc .ckl-sig-pad { width: 260px; max-width: 100%; height: 80px; border: 1.5px solid #b4b4bb; border-radius: 6px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.ckdoc .ckl-sig-actions { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ckdoc .ckl-sig-save { border: 1px solid var(--brand); background: var(--brand) !important; color: var(--brand-contrast) !important; border-radius: 5px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ckdoc .ckl-sig-save:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark); }
.ckdoc .ckl-sig-save:disabled { background: #cbd5e1 !important; border-color: #cbd5e1; color: #eef2f6 !important; cursor: not-allowed; }
/* Clear = erase, so it reads red for clear contrast (the old grey-on-grey
   made the label invisible). Disabled stays a readable muted red, never
   near-white on near-white. */
.ckdoc .ckl-sig-clear { border: 1px solid #f0c9c9; background: #fff; color: #dc2626 !important; border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ckdoc .ckl-sig-clear:hover { border-color: #dc2626; background: #fef2f2; color: #b91c1c !important; }
.ckdoc .ckl-sig-clear:disabled { background: #fafafa; color: #d19a9a !important; border-color: #f0dede; cursor: not-allowed; }
.ckdoc .ckl-sig-hint { font-size: 11px; color: #9ca3af; white-space: nowrap; }
/* Static signature box (canvas/preview/PDF) — same blank 260×80 white box as
   the run draw pad, so the two are pixel-identical. */
.ckdoc .ckl-sig-box { width: 260px; max-width: 100%; height: 80px; border: 1.5px solid #b4b4bb; border-radius: 6px; background: #fff; box-sizing: border-box; display: block; }
.ckdoc .ckl-sig-ts { font-size: 12px; color: var(--ok); }
.ckdoc .ckl-sig-line { border-bottom: 1px solid #333; min-width: 170px; max-width: 240px; height: 30px; }
.ckdoc .ckl-sig-geo { display: flex; align-items: center; gap: 8px; margin: 2px 0 7px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid #e5e7eb; background: #f8fafc; }
.ckdoc .ckl-sig-geo-dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.ckdoc .ckl-sig-geo-wait { background: #9ca3af; animation: ckSigGeoPulse 1.1s ease-in-out infinite; }
.ckdoc .ckl-sig-geo-ok { background: var(--ok); }
.ckdoc .ckl-sig-geo-near { background: #f59e0b; }
.ckdoc .ckl-sig-geo-out { background: #dc2626; }
.ckdoc .ckl-sig-geo-text { color: #334155; }
@keyframes ckSigGeoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }