/* NOTE: .trace-list-chip is also used on this page (for the small wordlist
   type tag next to each group heading). Its styles live in trace_dialog.css
   and are shared.

   Clickable word chips on the per-child mastery listing
   (/children/:id/mastery/:level). Each chip links to the word profile page.
   Size + palette vary by which mastery level the listing is for so the page
   visually matches the stat tile the user clicked from. */

.mastery-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: inset 0 0 0 1px transparent;
}
.mastery-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.2), inset 0 0 0 1px currentColor;
}

.mastery-chip[data-chip-tone="emerald"] { background: #ECFDF5; color: #047857; box-shadow: inset 0 0 0 1px #A7F3D0; }
.mastery-chip[data-chip-tone="emerald"]:hover { background: #D1FAE5; }

.mastery-chip[data-chip-tone="brand"]   { background: #EFF6FF; color: #1E40AF; box-shadow: inset 0 0 0 1px #BFDBFE; }
.mastery-chip[data-chip-tone="brand"]:hover   { background: #DBEAFE; }

.mastery-chip[data-chip-tone="amber"]   { background: #FFFBEB; color: #92400E; box-shadow: inset 0 0 0 1px #FDE68A; }
.mastery-chip[data-chip-tone="amber"]:hover   { background: #FEF3C7; }

.mastery-chip-flag {
  font-size: 10px;
  line-height: 1;
  color: #F59E0B;
}