/* Production additions for the public guest page. The visual base remains the approved mockup. */

.guest-task-media {
  min-height: 190px;
  margin: 0 0 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7eaf6;
  border-radius: 16px;
  background: #fff;
}

.guest-task-image {
  width: 100%;
  max-height: 48vh;
  object-fit: contain;
}

.guest-task-loading {
  width: 100%;
  padding: 42px 22px;
  display: grid;
  gap: 12px;
}

.guest-task-loading span {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #e7f2f9 25%, #f8fcff 50%, #e7f2f9 75%);
  background-size: 220% 100%;
  animation: guest-skeleton 1.25s ease-in-out infinite;
}

.guest-task-loading span:nth-child(2) { width: 84%; }
.guest-task-loading span:nth-child(3) { width: 62%; }

@keyframes guest-skeleton {
  from { background-position: 200% 0; }
  to { background-position: -20% 0; }
}

.guest-task-attachment {
  width: fit-content;
  margin: -6px 0 18px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfe7f7;
  border-radius: 12px;
  color: #0574bd;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.guest-answer-feedback,
.guest-flow-error {
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.guest-answer-feedback.correct {
  color: #126447;
  border: 1px solid #bdebd7;
  background: #effcf6;
}

.guest-answer-feedback.wrong,
.guest-flow-error {
  color: #8a3e24;
  border: 1px solid #f3c7b8;
  background: #fff5f1;
}

.guest-flow-error { margin: 0 0 16px; }

.guest-result-details {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid #cfe7f7;
  border-radius: 16px;
  color: #385875;
  background: #f7fbfe;
  line-height: 1.55;
}

.guest-result-details strong { color: #14304d; }

#next-diagnostic-task[disabled],
#start-diagnostic[disabled] {
  opacity: .68;
  cursor: wait;
  transform: none;
}

.login-home-link {
  width: fit-content;
  margin-bottom: 2px;
  text-decoration: none;
}

@media (max-width: 760px) {
  .modal {
    padding: 0;
    align-items: end;
  }

  .modal-card.flow-card {
    width: 100%;
    max-height: 94dvh;
    border-radius: 25px 25px 0 0;
  }

  .guest-task-image { max-height: 42dvh; }
  .guest-task-media { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .guest-task-loading span { animation: none; }
}