/* ==========================================================
   EXERCISE EXTRAS  (add-on for core_style.css)

   Load this AFTER core_style.css (and after choice_buttons.css
   if that's also used on the page). It only adds classes that
   core_style.css does not define — .check-btn, .reset-btn,
   .exercise-actions, .feedback-message, .order-slots,
   .mini-word-bank, .order-card — so nothing in core_style.css
   or any other exercise is changed.
   ========================================================== */

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 8px;
}

.check-btn,
.reset-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.check-btn {
  background: #3b82f6;
  color: #ffffff;
  border: 2px solid #3b82f6;
}
.check-btn:hover  { background: #2563eb; border-color: #2563eb; }
.check-btn:active { transform: scale(0.97); }

.reset-btn {
  background: #ffffff;
  color: #5b6f82;
  border: 2px solid #d9e2f0;
}
.reset-btn:hover  { border-color: #b9c8e0; color: #1e2a3a; }
.reset-btn:active { transform: scale(0.97); }

.feedback-message {
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
}
.feedback-message.success { color: #065f46; }
.feedback-message.retry   { color: #991b1b; }

/* Word-order sentence cards stack vertically instead of the
   default row layout, since they need slots + a mini bank +
   buttons underneath one another. */
.sentence-card.order-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.order-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A smaller, per-sentence word bank re-using .word-bank's look */
.mini-word-bank {
  min-height: 50px;
  padding: 12px 14px;
  margin: 0;
}