/* static/css/tests/feedback.css
   The mid-quiz feedback screen. Sits on the existing .flow-screen / .flow-card
   shell so it inherits the intro and congrats layout, and only adds what is
   different: a large illustration, a title with highlighted phrases, and a
   button pinned low on mobile where the thumb is. */

.fb-screen .fb-card {
  text-align: left;
  max-width: 560px;
}

/* Holds its height BEFORE the picture lands, so the title does not start high
   and jump down when the image decodes. The box is normally warm from the
   prefetch two questions earlier; this is for the taker whose prefetch missed.
   test.js hides the whole box when there is no picture or it did not arrive in
   time, which is why the space is reserved here rather than on .fb-card. */
.fb-illus {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: #fff;
  border-radius: 14px;
}

.fb-illus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .18s ease;
}

/* Set by test.js once the picture is decoded. Fading in rather than appearing
   means a cached image and a just-arrived one look the same. */
.fb-illus.is-ready img { opacity: 1; }

.fb-title {
  font-size: 1.65rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1f2a44;
}

/* The one piece of colour on the screen, so the highlighted phrase is the
   thing the eye lands on. Set from the [[markers]] in the title. */
.fb-title .fb-hl {
  color: var(--test-primary-color, #274285);
}

/* A rarity card puts a number in the title and the number is the point, so it
   carries the accent too even when the [[markers]] are around the trait name. */
.fb-title .fb-hl + .fb-hl {
  margin-left: 0;
}

.fb-subtext {
  font-size: 1rem;
  line-height: 1.6;
  color: #5b6478;
  margin: 0 0 28px;
}

.fb-screen .flow-cta {
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .fb-illus { min-height: 220px; height: unset; }
  .fb-illus img { max-width: 300px; }
  .fb-title { font-size: 1.4rem; }
  .fb-subtext { font-size: .95rem; margin-bottom: 22px; }
}

/* Motion is a nicety here and a problem for some people. One short fade, and
   nothing at all when the system asks for less. */
.fb-screen .fb-card {
  animation: fb-rise .28s ease-out both;
}

@keyframes fb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-screen .fb-card { animation: none; }
  .fb-illus img { transition: none; }
}