/* comprehend.css — the two-picture understanding check.

   One moment, not a quiz: the English line plays, two of his own scene
   photographs sit on the card, he taps the one that matches. The frames reuse
   the scene frame exactly (3px ink, 18px radius, hard offset shadow), so the two
   pictures read as two scenes from the same shoot rather than as answer options.
   No captions, no letters, no score, no counter, no red.

   Layout: stacked on a phone (each picture as wide as the card), side by side
   once the card has room. Nothing here is scoped outside #learning-panel except
   the stage width the two frames need. */

#learning-panel .lp-understand {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 2px;
}

#learning-panel .lp-card[data-mode="ask-understand"] .lp-understand { display: flex; }

/* The stage owns the card while it is open: no scene, no word blocks, no mic.
   The dock would offer a microphone that has nothing to record, and the scene
   would show the answer.

   Hidden rather than display:none, and lifted out of the flex column. The boot
   hand-off animation (`lp-stage-rise` on .lp-scene/.lp-middle/.lp-dock) restarts
   every time one of those goes from display:none back to visible — which would
   hand him an empty card for most of a second right after he taps, then fade the
   reward in just as it advances. Taking them out of flow keeps the animation
   finished, so the reward is there the instant the check closes. */
#learning-panel .lp-card[data-mode="ask-understand"] .lp-scene,
#learning-panel .lp-card[data-mode="ask-understand"] .lp-content,
#learning-panel .lp-card[data-mode="ask-understand"] .lp-dock {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  visibility: hidden;
  pointer-events: none;
}

#learning-panel .lp-card[data-mode="ask-understand"] {
  max-width: 820px;
  padding-bottom: 18px;
}

/* Two 16:9 frames need the room. On a phone the stage is already the viewport
   width; on anything wider the card widens for this one moment only. */
#stage.is-understand { max-width: 820px; }

/* ---------------- the board ---------------- */

#learning-panel .cp-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#learning-panel .cp-pair {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#learning-panel .cp-pic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 3px solid var(--lp-ink);
  border-radius: 18px;
  background: #2a2622;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--lp-ink);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#learning-panel .cp-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

#learning-panel .cp-pic:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--lp-ink);
}

@media (hover: hover) and (pointer: fine) {
  #learning-panel .cp-pic:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--lp-ink);
  }
}

/* The reveal. The picture the line means lifts and takes the accent shadow —
   the same "this is the one" the app already uses for the last word of a line.
   The other frame simply steps back. Nothing turns red and nothing is taken
   away. */
#learning-panel .cp-pic.is-right {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--lp-accent);
}

#learning-panel .cp-pic.is-other { opacity: .74; }

/* Once he has answered, the pictures stop being buttons. The reveal is not a
   thing to tap again, and a second tap must never record a second answer. */
#learning-panel .cp-board.is-answered .cp-pair { pointer-events: none; }

/* ---------------- listen ---------------- */

#learning-panel .cp-listen {
  flex: none;
  width: auto;
  height: 52px;
  padding: 0 24px;
  border-radius: 15px;
  background: var(--lp-pale);
  box-shadow: 4px 4px 0 var(--lp-accent);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

#learning-panel .cp-listen:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--lp-accent);
}

/* ---------------- the question ---------------- */

/* Says what to do. The board is the only place in the app where a tap is the
   answer, so it cannot rely on him remembering that from last time. Set quieter
   than the pictures on purpose: it is an instruction, not the thing to look at. */
#learning-panel .cp-ask {
  margin: 0;
  color: #5b5145;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}

/* ---------------- the one line of words ---------------- */

#learning-panel .cp-line {
  min-height: 27px;
  margin: 0;
  color: var(--lp-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: center;
}

#learning-panel .cp-board[data-state="right"] .cp-line { color: var(--lp-accent); }

/* ---------------- continue ---------------- */

#learning-panel .cp-next {
  flex: none;
  width: auto;
  min-width: 176px;
  height: 56px;
  padding: 0 30px;
  border-radius: 16px;
  background: var(--lp-accent);
  color: var(--lp-paper);
  box-shadow: 5px 5px 0 var(--lp-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}

#learning-panel .cp-next:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--lp-ink);
}

/* ---------------- room for two frames ---------------- */

@media (min-width: 700px) {
  #learning-panel .cp-pair {
    flex-direction: row;
    gap: 18px;
  }

  #learning-panel .cp-pic {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Landscape phones are short. The frames keep their 16:9 window and crop rather
   than pushing the Listen pill off the card. */
@media (max-height: 560px) {
  #learning-panel .lp-understand { gap: 10px; padding: 2px 0; }
  #learning-panel .cp-board { gap: 10px; }
  #learning-panel .cp-pair { gap: 10px; }
  #learning-panel .cp-pic { max-height: 38vh; border-radius: 14px; box-shadow: 4px 4px 0 var(--lp-ink); }
  #learning-panel .cp-pic.is-right { box-shadow: 6px 6px 0 var(--lp-accent); }
  #learning-panel .cp-listen { height: 44px; padding: 0 18px; font-size: 16px; }
  #learning-panel .cp-line { min-height: 21px; font-size: 17px; }
  #learning-panel .cp-next { height: 46px; min-width: 150px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  #learning-panel .cp-pic,
  #learning-panel .cp-listen,
  #learning-panel .cp-next { transition: none; }
}