/*
 * 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.
 */

/* Map pin used for the sign location. A CSS pin rather than Leaflet's default
   image marker, whose icon URLs don't survive asset digesting. */
.sign-pin span {
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #059669;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
  transform: rotate(-45deg);
}

.leaflet-container {
  font: inherit;
}

/* Printable QR sheet. */

/* Without this the sheet prints at whatever margin the browser dialog happens
   to default to, and on "None" the outer cards' borders fall inside the
   printer's unprintable edge and come out clipped. Half an inch clears the
   hardware margin on every consumer printer. */
@page {
  size: letter;
  margin: 0.5in;
}

@media print {
  .qr-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Rounded corners and hairline borders are the first thing a printer loses
     at the edge of its range. A card is a cut line, so it has to survive. */
  .qr-sheet {
    padding: 2pt;
  }

  body {
    background: #fff;
  }
}

/* The saved confirmation arrives with the page, so a brief entrance keeps it
   from being mistaken for part of the form the volunteer was just looking at. */
.sign-saved {
  animation: sign-saved-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sign-saved-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sign-saved { animation: none; }
}