/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.signature-pad-canvas {
  touch-action: none;
  height: 180px;
  cursor: crosshair;
  /* Stays white with dark ink in both themes; the stored signature is dark on white. */
  background: #fff;
}

/* QR handoff to a phone only makes sense on devices with a mouse. */
.qr-handoff {
  display: none;
}

/* White in both themes so phones can scan it on a dark page. */
.qr-handoff .qr-code {
  max-width: 200px;
  padding: 10px;
  background: #fff;
}

.qr-handoff .qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .qr-handoff {
    display: block;
  }
}