/* ============================ FLASHCARDS PAGE ============================
   Presentation for the arrow-key progress bar and got-it / review toggle.
   Foundation tokens come from css/styles.css. */

.fc-progress{
  position: relative;
  height: 6px;
  max-width: var(--measure, 640px);
  margin: 1.1rem auto 0;
  border-radius: 999px;
  background: var(--line, rgba(0,0,0,.12));
  overflow: hidden;
}
.fc-progress-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky, #2a7de1), var(--moss, #4a9c5d));
  transition: width .28s ease;
}

.fc-status{
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin: 1rem auto 0;
}
.fc-mark{
  font-family: var(--font-label, inherit);
  font-size: .85rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line-2, rgba(0,0,0,.2));
  background: var(--surface, #fff);
  color: var(--ink-soft, #444);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.fc-mark:hover{ transform: translateY(-1px); }
.fc-mark:focus-visible{ outline: 2px solid var(--ring, #2a7de1); outline-offset: 2px; }
.fc-mark.got.on{
  background: var(--good, #2e7d4f);
  border-color: var(--good, #2e7d4f);
  color: #fff;
}
.fc-mark.review.on{
  background: var(--amber, #e0a020);
  border-color: var(--amber, #e0a020);
  color: #2a1c00;
}

/* Subtle status cue on the card itself. */
#card3d[data-status="got"] .inner{ box-shadow: 0 0 0 2px var(--good, #2e7d4f); }
#card3d[data-status="review"] .inner{ box-shadow: 0 0 0 2px var(--amber, #e0a020); }

.fc-hint-keys{
  text-align: center;
  margin: .75rem auto 0;
  font-size: .8rem;
  color: var(--ink-faint, #888);
}

@media (max-width: 480px){
  .fc-status{ flex-wrap: wrap; }
}