.modal-overlay[data-vcs-overlay] { display: none; }
.modal-overlay[data-vcs-overlay].open { display: flex; }
.vcs-dialog { max-width: 620px; width: min(620px, calc(100vw - 32px)); }
.vcs-copy { color: var(--muted); line-height: 1.6; }
.vcs-tabs { display: flex; margin-top: 18px; border: 1px solid rgba(var(--gold-rgb), .25); border-radius: 8px; overflow: hidden; }
.vcs-tab { flex: 1; min-height: 42px; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.vcs-tab[aria-selected="true"] { background: rgba(var(--gold-rgb), .12); color: var(--gold-light); }
/* The pad is PAPER, not chrome — fixed white with fixed dark ink in every theme
   and for every tenant, so the signer sees the mark exactly as it will appear on
   the executed PDF. Branding it is what captured signatures in the tenant's
   near-white text color, invisible on the document (see VCS_INK,
   vantage-client-signature.js). Nate's ruling 2026-08-03. */
.vcs-canvas-wrap { position: relative; height: 150px; margin-top: 14px; border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 8px; background: #fff; overflow: hidden; touch-action: none; }
.vcs-canvas { display: block; width: 100%; height: 150px; cursor: crosshair; }
/* Signing baseline, so a white pad still reads as a pad. */
.vcs-canvas-wrap::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 38px; border-bottom: 1px solid rgba(26, 26, 26, .22); pointer-events: none; }
.vcs-canvas-hint { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(26, 26, 26, .45); pointer-events: none; }
.vcs-clear { margin-top: 8px; }
.vcs-field { display: grid; gap: 7px; margin-top: 16px; }
.vcs-label { color: var(--gold-dim-text, var(--gold-dim)); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
.vcs-field input { width: 100%; min-height: 44px; border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 8px; background: var(--bg-mid); color: var(--gold-light); font: inherit; padding: 10px 12px; }
.vcs-legal { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.vcs-error { min-height: 18px; margin-top: 10px; color: var(--v-danger, #e07070); font-size: 12px; }
/* Progress, not failure. Muted so a slow-but-fine submit never reads as an error. */
.vcs-status { margin-top: 10px; color: var(--muted); font-size: 12px; }
.vcs-status:empty { display: none; }

@media (max-width: 560px) {
  .vcs-dialog { width: calc(100vw - 20px); }
}