/* Check-in flow on the phone.

   The form stays with no animation at all, by a decision recorded in the spec:
   nothing stands between the participant and the submit button. No
   `.check-in__*` rule in this sheet animates, transitions or transforms
   anything — whoever touches this, keep it that way.

   What did get movement is the preview, which is where the person stops to
   check their own name, and its passage into the reveal. Nothing lasts longer
   than half a second: in a crowded room, a transition is confirmation that the
   tap registered, not a spectacle. The spectacle is the reveal, and it lives in
   `reveal.css`. */

.check-in,
.preview {
  box-sizing: border-box;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  line-height: 1.5;
}

.check-in__title,
.preview__title {
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.check-in__subtitle,
.preview__notice {
  margin: 0 0 1.5rem;
  color: #4a4a4a;
}

.check-in__errors {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #9c1420;
  background: #fdeaea;
  color: #7a1414;
}

.check-in__errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.check-in__field {
  margin-bottom: 1.25rem;
}

.check-in__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

/* 16px on the input avoids Safari's automatic zoom on the iPhone when focused. */
.check-in__field input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #999;
  border-radius: 6px;
}

.check-in__hint {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #666;
}

.check-in__button,
.preview__confirm {
  width: 100%;
  padding: 0.9rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  background: #9c1420;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.preview__stage {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

/* The sheet is A4 landscape in millimetres; on a phone it only fits shrunk.
   `zoom` shrinks the box along with the content, which `scale` does not do.

   The ladder is fine-grained because here the person is checking their own name
   letter by letter: each step is the largest zoom that still fits the smallest
   screen in the band, and every extra millimetre is legibility. */
.preview__sheet {
  width: 297mm;
}

@media (max-width: 1160px) { .preview__sheet { zoom: 0.92; } }
@media (max-width: 1060px) { .preview__sheet { zoom: 0.83; } }
@media (max-width: 960px)  { .preview__sheet { zoom: 0.74; } }
@media (max-width: 860px)  { .preview__sheet { zoom: 0.65; } }
@media (max-width: 760px)  { .preview__sheet { zoom: 0.56; } }
@media (max-width: 660px)  { .preview__sheet { zoom: 0.47; } }
@media (max-width: 560px)  { .preview__sheet { zoom: 0.40; } }
@media (max-width: 480px)  { .preview__sheet { zoom: 0.35; } }
@media (max-width: 420px)  { .preview__sheet { zoom: 0.31; } }
@media (max-width: 380px)  { .preview__sheet { zoom: 0.28; } }
@media (max-width: 340px)  { .preview__sheet { zoom: 0.25; } }

.preview__correct {
  display: block;
  margin-top: 1rem;
  text-align: center;
  color: #1a1a1a;
}

/* ─── The preview's arrival ──────────────────────────────────────────────────
   The preview arrives through Turbo, which swaps the page's body: the elements
   are new in the DOM, so the entrance animation runs just like on a full load.
   The sheet comes in right after the text, and that is all — 400ms. */

.preview {
  animation: preview-in 260ms ease-out both;
}

.preview__stage {
  animation: preview-sheet-in 400ms 60ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes preview-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes preview-sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── The passage from preview to reveal ─────────────────────────────────────
   Tapping "sim, está correto" takes a few tenths of a second until the
   certificate shows up, and the participant needs to know it registered. What
   gives that feedback is Turbo itself: it disables the button while submitting
   and swaps the text through `data-turbo-submits-with`. Here we only paint the
   state.

   Without JavaScript the button is never disabled, and what is left is the
   ordinary button — which is exactly today's behaviour. */

.preview__confirm {
  transition: transform 120ms ease, opacity 120ms ease;
}

.preview__confirm:active {
  transform: scale(0.985);
}

.preview__confirm:disabled {
  cursor: progress;
  opacity: 0.75;
  animation: confirm-pulse 1.1s ease-in-out infinite;
}

@keyframes confirm-pulse {
  50% { opacity: 0.95; }
}

/* Turbo's progress bar already existed; it was just blue out of the box. */
.turbo-progress-bar {
  height: 3px;
  background: #9c1420;
}

/* The expired-QR page and the closed-registrations page: same family as the
   form, because both are the same flow seen from a phone that arrived late —
   by thirty seconds, or by an hour. */
.expired,
.closed {
  box-sizing: border-box;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  line-height: 1.5;
}

.expired__title,
.closed__title {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.expired__text,
.closed__text {
  margin: 0;
  font-size: 1.0625rem;
  color: #4a4a4a;
}

/* ─── For whoever asked the world to hold still ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .preview,
  .preview *,
  .preview *::before,
  .preview *::after,
  .turbo-progress-bar {
    animation: none !important;
    transition: none !important;
  }
}