/* ===========================================================================
 * hint.css — shared canonical visual for the inline hint affordance.
 * ===========================================================================
 * Used by McItem, AnalogyItem, PassageItem, PassageEditItem when:
 *   features.hint === true  AND  the item (or per-question) carries a `hint`
 * Hint UX:
 *   - Collapsed: a small "Hint" button.
 *   - Expanded:  the hint content in a soft accent-tinted card.
 * One canonical visual; no per-surface override.
 *
 * Class names use the shared .item-hint-* prefix so all four item renderers
 * can opt in by emitting the same DOM. Older mc-hint-* class names (in
 * McItem only) are retired in favor of these.
 * ========================================================================= */

.item-hint-row {
  margin: 8px 0 12px;
}

.item-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui, inherit);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.item-hint-btn:hover { border-color: var(--ink-30); }
.item-hint-btn:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 2px;
}
.item-hint-btn::before {
  content: '💡';
  font-size: 13px;
}

.item-hint {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-coral-tint, rgba(201, 111, 74, 0.12));
  border: 1px solid var(--accent-coral, #C96F4A);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}