/* flashcard — one card, two sides.
 *
 * Both faces are stacked in the same box and the back is hidden until the card
 * turns, so the card does not change height when it flips. A card that jumps
 * taller on the turn moves the rating buttons out from under a thumb that was
 * already on the way to them.
 */

.ba-fc {
  position: relative;
  display: grid;
  min-height: 11rem;
  padding: var(--bt-s4);
  border-radius: var(--bt-radius);
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  box-shadow: var(--bt-shadow-lift);
  transition: border-color var(--bt-t) var(--bt-ease);
}

/* Both faces occupy the same cell, so the taller of the two sets the height
   once and neither side moves anything when it appears. */
.ba-fc__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bt-s3);
  text-align: center;
}

.ba-fc__face.is-back { visibility: hidden; }
.ba-fc.is-turned .ba-fc__face.is-front { visibility: hidden; }
.ba-fc.is-turned .ba-fc__face.is-back {
  visibility: visible;
  animation: baFcTurn var(--bt-t) var(--bt-ease);
}

.ba-fc.is-turned { border-color: var(--bt-teal); }

/* Not a 3-D rotation. A real flip needs the back rendered mirrored behind the
   front, which on a cheap phone is a second composited layer for the whole
   card; this reads as the same gesture and costs nothing. */
@keyframes baFcTurn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.ba-fc__text {
  margin: 0;
  font-size: var(--bt-fs-prompt);
  font-weight: 700;
  line-height: 1.35;
}

.ba-fc__face.is-back .ba-fc__text {
  font-weight: 600;
  color: var(--bt-ink);
}

.ba-fc img {
  display: block;
  max-width: 100%;
  max-height: 9rem;
  width: auto;
  height: auto;
  border-radius: var(--bt-radius-sm);
}

.ba-fc__flip {
  display: block;
  width: 100%;
  min-height: var(--bt-tap);
  margin-top: var(--bt-s3);
  padding: 0 var(--bt-s4);
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--bt-teal);
  border: 0;
  border-radius: var(--bt-radius-pill);
  box-shadow: var(--bt-shadow);
  cursor: pointer;
}

.ba-fc__flip:active { transform: translateY(2px); }

.ba-fc__how {
  margin: var(--bt-s4) 0 var(--bt-s2);
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-ink-soft);
  text-align: center;
}

/* Four across, because they are a scale and a scale should be read left to
   right in one glance. Two words each at most, so they fit at 360px. */
.ba-fc__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bt-s2);
}

.ba-fc__btn {
  min-height: var(--bt-tap);
  padding: var(--bt-s2) var(--bt-s1);
  font: inherit;
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-ink);
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  border-radius: var(--bt-radius-sm);
  cursor: pointer;
  transition: transform var(--bt-t-quick) var(--bt-ease),
              background var(--bt-t-quick) var(--bt-ease);
}

.ba-fc__btn:not(:disabled):active { transform: translateY(2px); }

/* A gradient from warm to green across the four. Not a traffic light: "again"
   is a perfectly good thing to press, and colouring it like a failure is how
   you teach somebody to press "good" when they mean "again" — which quietly
   breaks the only signal the schedule has. */
.ba-fc__btn.is-again { border-color: var(--bt-close); color: var(--bt-close); }
.ba-fc__btn.is-hard  { border-color: var(--bt-gold); }
.ba-fc__btn.is-good  { border-color: var(--bt-teal); }
.ba-fc__btn.is-easy  { border-color: var(--bt-right); color: var(--bt-right); }

.ba-fc__btn:disabled { opacity: 0.5; cursor: default; }