/* Document signing (#documents/<id>): the document on screen, the statements, the signature pad and the signed preview. */
.sg-status{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:18px}
.sg-status p{margin:0;flex:1 1 320px;font-size:14px}
.sg-status.sg-waiting{border-left:4px solid #e3a008}
.sg-status.sg-done{border-left:4px solid #6c9a1f}
.sg-files{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:18px}
.sg-files .section-label{margin:0;width:100%}
.sg-files a{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.sg-paper{background:#e9edf2;padding:18px;border-radius:var(--radius,14px)}
.card.sg-paper{margin-bottom:18px}
.sg-frame{display:block;width:100%;max-width:840px;min-height:420px;margin:0 auto;border:0;background:#fff;box-shadow:0 2px 14px rgba(10,34,67,.12);border-radius:4px}
.sg-panel{margin-bottom:24px}
.sg-steps{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.sg-step h2{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 6px}
.sg-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy,#0a2243);color:#fff;font-size:14px;flex:none}
.sg-ticks{display:grid;gap:10px;margin-top:12px}
.sg-tick{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line,#e1e7ed);border-radius:12px;background:#fff;cursor:pointer;font-size:14px;line-height:1.5}
.sg-tick input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--navy,#0a2243)}
.sg-tick:has(input:checked){border-color:#a9c76b;background:#f6faee}
.sg-final{margin:16px 0 12px;border-width:2px;border-color:#0a2243;font-weight:600}
.sg-tabs{display:inline-flex;border:1px solid var(--line,#e1e7ed);border-radius:999px;padding:3px;margin:10px 0 12px;background:#f6f8fa}
.sg-tab{border:0;background:none;padding:7px 16px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;color:#475569}
.sg-tab.active{background:#fff;color:var(--navy,#0a2243);font-weight:600;box-shadow:0 1px 4px rgba(10,34,67,.14)}
/* Employee ID signature options in the Issue a document dialog. */
.doc-id-sign{display:grid;gap:10px;padding:14px;border:1px solid var(--line,#e2e7ef);border-radius:14px;background:#fafbf7}
.ids-modes{display:grid;gap:6px}
.ids-mode{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid #e2e7ef;border-radius:10px;background:#fff;cursor:pointer}
.ids-mode strong{display:block;font-size:14px}
.ids-mode small{display:block;font-size:12.5px;color:#657188}
.ids-saved{max-width:120px;max-height:40px;object-fit:contain}
.ids-pad-wrap{max-width:460px}
.ids-upload-view img{max-width:260px;max-height:80px;object-fit:contain;border:1px dashed #cfd6e4;border-radius:8px;padding:6px;background:#fff}
.sg-pad-wrap{position:relative;max-width:620px;height:200px;border:2px dashed #b9c4d2;border-radius:14px;background:#fff}
.sg-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:12px}
.sg-line{position:absolute;left:28px;right:28px;bottom:46px;border-bottom:1.5px solid #8a97a8;pointer-events:none}
.sg-hint{position:absolute;left:30px;bottom:20px;font-size:13px;color:#8a97a8;pointer-events:none;transition:opacity .2s}
.sg-hint.gone{opacity:0}
.sg-upload{max-width:620px}
.sg-upload-view{margin:10px 0;padding:14px;border:1px solid var(--line,#e1e7ed);border-radius:12px;background:#fff;text-align:center}
.sg-upload-view img{max-height:140px;max-width:100%}
.sg-pad-actions{margin-top:10px}
.sg-preview{margin-top:16px}
#sg-errors:empty{display:none}
#sg-errors{white-space:pre-line;margin-bottom:12px}
@media (max-width:600px){
  .sg-paper{padding:8px;border-radius:10px}
  .sg-pad-wrap{height:180px}
  .sg-step h2{font-size:16px}
  .sg-status .btn{width:100%;justify-content:center}
}
/* Long titles (a policy name) must not squeeze the header buttons onto several lines. */
.page-head:has(~ .sg-status) .head-actions .btn,.page-head:has(~ .sg-paper) .head-actions .btn{white-space:nowrap}