/* Connect Sign and Connect Calendar - shared look for /sign/ (staff), /s/ (signers) and /cal/. The colours and
   fonts are the EPG Connect brand from /assets/epg-brand.css (load it first); a company's white label swaps
   them in after sign-in (/assets/epg-brand.js). */
body { background: var(--page); color: var(--ink); font-family: var(--f-body); }
[hidden] { display: none !important; }
.btn-primary {
  --tblr-btn-bg: var(--brand); --tblr-btn-border-color: var(--brand); --tblr-btn-color: var(--brand-on);
  --tblr-btn-hover-bg: var(--brand-hover); --tblr-btn-hover-border-color: var(--brand-hover); --tblr-btn-hover-color: var(--brand-on);
  --tblr-btn-active-color: var(--brand-on); --tblr-btn-disabled-color: var(--brand-on);
  --tblr-btn-active-bg: var(--brand-ink); --tblr-btn-active-border-color: var(--brand-ink);
  --tblr-btn-disabled-bg: var(--brand); --tblr-btn-disabled-border-color: var(--brand);
  font-weight: 600;
}
.btn-outline-primary {
  --tblr-btn-color: var(--brand-ink); --tblr-btn-border-color: var(--brand);
  --tblr-btn-hover-bg: var(--brand); --tblr-btn-hover-border-color: var(--brand); --tblr-btn-hover-color: var(--brand-on);
  --tblr-btn-active-bg: var(--brand); --tblr-btn-active-color: var(--brand-on);
}
.btn-dark { --tblr-btn-bg: var(--chrome); --tblr-btn-border-color: var(--chrome); font-weight: 600; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 25%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.card { border-radius: 14px; border-color: var(--line); }

/* Top bar */
.cs-top { background: var(--chrome); color: var(--chrome-ink); display: flex; align-items: center; gap: 14px; padding: 10px 20px; min-height: 60px; position: sticky; top: 0; z-index: 50; }
.cs-top img { height: 34px; width: auto; }
.cs-top .cs-name { font-family: var(--f-head); font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.cs-top .cs-name small { display: block; font-weight: 400; font-size: 11px; color: var(--chrome-muted); letter-spacing: .04em; }
.cs-top .cs-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--chrome-muted); }
.cs-top a { color: #fff; }
.cs-main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }

/* Status badges */
.cs-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.st-draft { background: #EEE; color: #444; }
.st-sent, .st-completing { background: var(--brand-tint); color: var(--brand-ink); }
.st-completed { background: var(--ok-bg); color: var(--ok); }
.st-declined { background: var(--bad-bg); color: var(--bad); }
.st-voided, .st-expired { background: #ECECEC; color: #555; }

/* PDF pages + field layer */
.cs-pages { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cs-page { position: relative; width: 100%; max-width: 1100px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.cs-canvas { display: block; width: 100%; height: 100%; }
.cs-layer { position: absolute; inset: 0; }
/* Selectable text over the page (pdf.js text layer; owner 2026-10-14). The words are invisible, only the
   selection shows. Under .cs-layer, so it is reached where the page lets it: .cs-pass (document view) or
   .cs-textmode (editor, "Select text"). */
.cs-text { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; }
.cs-text :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.cs-text span.markedContent { top: 0; height: 0; }
.cs-text ::selection { background: rgba(18, 120, 255, .35); }
.cs-text br::selection { background: transparent; }
.cs-layer.cs-pass, .cs-textmode .cs-layer { pointer-events: none; }
.cs-textmode .cs-field { opacity: .45; }
.cs-page-no { font-size: 12px; color: var(--muted); margin: 2px 0 14px; }
.cs-field { position: absolute; box-sizing: border-box; border: 2px solid var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent);
  border-radius: 4px; font-size: 11px; line-height: 1.1; color: var(--ink); display: flex; align-items: center; overflow: hidden; touch-action: none; user-select: none; }
.cs-field .cs-tag { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cs-field.selected { box-shadow: 0 0 0 3px rgba(0,0,0,.35); z-index: 3; }
.cs-field img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left center; }
.cs-filled { position: absolute; display: flex; align-items: center; color: #0D2673; font-size: 12px; overflow: hidden; pointer-events: none; }
.cs-filled-box { border: 1px solid #1A1A1A; justify-content: center; font-weight: 700; }
.cs-block { flex-direction: column; align-items: stretch; }
.cs-block .cs-block-sig { flex: 0 0 60%; display: flex; align-items: flex-end; overflow: hidden; }
.cs-block .cs-block-sig img { max-height: 100%; max-width: 100%; object-fit: contain; object-position: left bottom; }
.cs-block .cs-block-row { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #9E9E9E; margin-top: 4%; padding: 0 2px; color: #0D2673; white-space: nowrap; overflow: hidden; gap: 6px; }
.cs-filled img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left center; }

.cs-muted { color: var(--muted); }
.cs-error { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 14px; }
.cs-note { background: var(--brand-tint); border-radius: 10px; padding: 10px 14px; }
.cs-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: cs-spin .8s linear infinite; vertical-align: -3px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .cs-top { padding: 8px 12px; gap: 10px; } .cs-top img { height: 30px; } .cs-main { padding: 14px 12px 60px; } }

/* Edit PDF (sign/pdfedit.js; owner 2026-10-15): marks over the page, above the fields while editing. */
.pe-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pe-layer.active { pointer-events: auto; }
.pe-layer.active.armed { cursor: crosshair; }
.pe-mark { position: absolute; box-sizing: border-box; }
.pe-layer.active .pe-mark { cursor: move; }
.pe-text, .pe-date { white-space: pre; font-family: Helvetica, Arial, sans-serif; line-height: 1.2; padding: 0; min-width: 4px; }
.pe-text.editing { outline: 2px dashed var(--brand, #12D66B); background: rgba(255,255,255,.85); cursor: text; min-width: 60px; }
.pe-check { color: #111; } .pe-check svg { width: 100%; height: 100%; display: block; }
.pe-whiteout { background: #fff; outline: 1px dashed #b5b5b5; }
.pe-redact { background: #111; color: #fff; font: 600 10px Helvetica, Arial, sans-serif; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pe-highlight { background: rgba(255, 213, 51, .42); }
.pe-strike::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid currentColor; }
.pe-strike { color: #C21A1A; }
.pe-note { background: #FFF7D6; border: 1px solid #E8C547; border-radius: 4px; padding: 5px 6px; font: 11px/1.25 Helvetica, Arial, sans-serif; color: #4a3d00; overflow: hidden; white-space: pre-wrap; }
.pe-note.editing { cursor: text; outline: 2px dashed var(--brand, #12D66B); overflow: auto; }
.pe-mark.sel { outline: 2px solid var(--brand, #12D66B); outline-offset: 2px; }
.pe-mark.ghost { opacity: .7; pointer-events: none; }
.pe-x { position: absolute; top: -12px; right: -12px; width: 22px; height: 22px; border-radius: 11px; border: 0; background: #B42318; color: #fff; font-size: 11px; line-height: 22px; padding: 0; cursor: pointer; }
.pe-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid #EFEFEF; padding-top: 8px; margin-top: 8px; width: 100%; }
.pe-tool { font: inherit; font-size: 13px; border: 1px solid #C9CCD1; background: #fff; border-radius: 8px; padding: 4px 10px; }
.pe-tool.on { border: 2px solid var(--brand, #12D66B); background: var(--brand-tint, #E7FAEF); font-weight: 600; }
.pe-lab { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.pe-select { font: inherit; font-size: 13px; border: 1px solid #C9CCD1; border-radius: 6px; padding: 2px 4px; }
.pe-hint { font-size: 12px; color: var(--muted, #5E5E5E); margin-left: auto; }
.cs-pdfedit .cs-layer { pointer-events: none; }
.cs-pdfedit .cs-field { opacity: .4; }

/* PDF tools tab (sign/pdftools.js) */
.pt-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; border: 2px dashed #C9CCD1; border-radius: 14px; background: #fff; cursor: pointer; text-align: center; padding: 24px; }
.pt-drop.over { border-color: var(--brand, #12D66B); background: var(--brand-tint, #E7FAEF); }
.pt-sel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--brand-tint, #E7FAEF); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pt-page { display: flex; flex-direction: column; gap: 6px; border-radius: 8px; padding: 6px; border: 2px solid transparent; }
.pt-page.on { border-color: var(--brand, #12D66B); background: var(--brand-tint, #E7FAEF); }
.pt-page.drop { border-color: #2F80ED; }
.pt-page.dragging { opacity: .4; }
.pt-thumb { height: 200px; padding: 8px; display: flex; align-items: center; justify-content: center; background: #f4f4f4; border-radius: 4px; overflow: hidden; color: var(--muted, #5E5E5E); font-size: 12px; }
.pt-thumb canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; border: 1px solid #D5D8DC; box-shadow: 0 1px 3px rgba(0,0,0,.12); background: #fff; }
.pt-lab { font-size: 13px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.pt-move { display: flex; justify-content: space-between; }
.pt-edit-head { position: sticky; top: 64px; z-index: 30; background: #fff; padding-bottom: 8px; border-bottom: 1px solid var(--line, #E3E3E3); }
.pt-edit .cs-pages { max-width: 860px; margin-left: auto; margin-right: auto; }