/* jarchi catch-up (catchup.js): while a listener hears the part they missed, a calm card under the class header (a
   card like conn.css's banner; turquoise: nothing is wrong, it is being taken care of). */
.room > .catchup {
  flex: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 8px var(--gut) 0; padding: 4px; padding-inline-start: 14px;
  min-height: var(--tap);
  border: 1px solid var(--accent-line); border-radius: var(--r-pop);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: var(--fw-b); line-height: 1.6;
  animation: kit-pop var(--t-med) var(--ease);
}
.room > .catchup[hidden] { display: none; }
.catchup-text { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; padding-block: 6px; }
/* Two small arrows forward (it plays what you missed, a little faster); RTL: forward points left. */
.catchup-text::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) var(--mark-skip) center / 12px no-repeat;
  transform: scaleX(-1);
}
.catchup .btn.small { width: auto; flex: none; min-height: var(--tap); }
/* A phone on its side: one slim line. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room > .catchup { margin-top: 4px; padding-block: 0; font-size: var(--fs-s); }
  .catchup-text { padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) { .room > .catchup { animation: none; } }
.catchup-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.catchup-acts .btn.small { width: auto; min-height: var(--tap); }
/* The teacher's card (conn.js): «سارا ۱۲ ثانیه از دست داد و جبران کرد». */
.conn-pcard-caught { margin: 0 0 4px; color: var(--ink-2); font-size: var(--fs-s); font-weight: var(--fw-m); }
/* After class: «بخش‌هایی که از دست دادی», each a tap away. */
.catchup-marks { margin-block: var(--s4); display: flex; flex-direction: column; gap: 8px; }
.catchup-marks h2 { margin: 0; font-size: var(--fs); }
.catchup-mark { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pop); background: var(--card); font-weight: var(--fw-m); }
.catchup-mark .btn.small { width: auto; min-height: var(--tap); }
.catchup-mark-msg { margin: 0; }
/* The board as it was at the moment the voice is at (catchup.js), over the live board while catching up. */
.catchup-board { position: absolute; z-index: 3; pointer-events: none; }
.catchup-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }