/* =============================================================================
   IAM English Engine — Sprint 3 styles (Sort & Categorise + Match Pairs)
   APPEND this to assets/css/iam-engine.css.
   Reuses the existing :root design tokens and .iam-btn / .iam-drag-ghost rules.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   ENGINE 03 — SORT & CATEGORISE
   ───────────────────────────────────────────────────────────────────────────── */
.iam-sort .iam-sort__header { text-align: center; margin-bottom: 1.25rem; }
.iam-sort__badge {
  display: inline-block;
  background: var(--iam-primary-light);
  color: var(--iam-primary);
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .75rem; border-radius: 999px; margin-bottom: .5rem;
}
.iam-sort__title { font-size: 1.4rem; font-weight: 800; margin-bottom: .25rem; }
.iam-sort__instruction { color: var(--iam-muted); font-size: .95rem; }

.iam-sort__bank {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  background: var(--iam-surface);
  border: 1.5px solid var(--iam-border);
  border-radius: var(--iam-radius);
  padding: 1rem; margin-bottom: 1.5rem; min-height: 3.5rem;
}
.iam-sort__token {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; line-height: 1.3;
  background: var(--iam-white);
  border: 1.5px solid var(--iam-primary);
  border-radius: var(--iam-radius-sm);
  color: var(--iam-primary);
  font-family: var(--iam-font); font-size: .95rem; font-weight: 700;
  cursor: grab; user-select: none; touch-action: none;
  transition: transform var(--iam-transition), box-shadow var(--iam-transition), opacity var(--iam-transition), background var(--iam-transition), border-color var(--iam-transition);
}
.iam-sort__token:hover { transform: translateY(-2px); box-shadow: var(--iam-shadow); }
.iam-sort__token.is-dragging { opacity: .4; cursor: grabbing; }
.iam-sort__token.is-correct { border-color: var(--iam-success); background: var(--iam-success-light); color: var(--iam-success); }
.iam-sort__token.is-wrong   { border-color: var(--iam-error);   background: var(--iam-error-light);   color: var(--iam-error); animation: iam-shake .35s ease; }
.iam-sort__audio-btn { cursor: pointer; font-size: 1rem; line-height: 1; }
.iam-sort__audio-btn.is-playing { animation: iam-pulse 1s ease infinite; }

.iam-sort__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.iam-sort__cat {
  border: 1.5px solid var(--iam-border);
  border-radius: var(--iam-radius);
  background: var(--iam-white);
  overflow: hidden; box-shadow: var(--iam-shadow);
  display: flex; flex-direction: column;
}
.iam-sort__cat-head {
  background: var(--iam-cat-color, var(--iam-primary));
  color: #fff; font-weight: 800; font-size: 1rem;
  padding: .6rem 1rem; text-align: center;
}
.iam-sort__cat-body {
  flex: 1; min-height: 6rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start;
  padding: .85rem; background: var(--iam-surface);
  transition: background var(--iam-transition);
}
.iam-sort__cat-body.drag-over { background: var(--iam-primary-light); }

/* ─────────────────────────────────────────────────────────────────────────────
   ENGINE 04 — MATCH PAIRS
   ───────────────────────────────────────────────────────────────────────────── */
.iam-match .iam-match__header { text-align: center; margin-bottom: 1.25rem; }
.iam-match__badge {
  display: inline-block;
  background: #EFF6FF; color: #2563EB;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .75rem; border-radius: 999px; margin-bottom: .5rem;
}
.iam-match__title { font-size: 1.4rem; font-weight: 800; margin-bottom: .25rem; }
.iam-match__instruction { color: var(--iam-muted); font-size: .95rem; }

.iam-match__board {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-bottom: 1.5rem;
}
.iam-match__col { display: flex; flex-direction: column; gap: .6rem; }

.iam-match__item {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .7rem .9rem;
  background: var(--iam-white);
  border: 1.5px solid var(--iam-border);
  border-radius: var(--iam-radius-sm);
  font-family: var(--iam-font); font-size: .95rem; font-weight: 700;
  color: var(--iam-text); cursor: pointer;
  transition: border-color var(--iam-transition), box-shadow var(--iam-transition), background var(--iam-transition), transform var(--iam-transition);
}
.iam-match__item:hover { box-shadow: var(--iam-shadow); }
.iam-match__label { flex: 1; }
.iam-match__dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--iam-border); flex-shrink: 0;
  transition: background var(--iam-transition), border-color var(--iam-transition);
}
.iam-match__audio-btn { cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; }
.iam-match__audio-btn.is-playing { animation: iam-pulse 1s ease infinite; }

/* selected (waiting for its right-hand match) */
.iam-match__item.is-selected {
  border-color: var(--iam-primary);
  background: var(--iam-primary-light);
  box-shadow: var(--iam-shadow);
}
/* connected pair — colour shared via --iam-pair-hue set by the JS */
.iam-match__item.is-connected {
  border-color: hsl(var(--iam-pair-hue, 220), 70%, 55%);
  background: hsl(var(--iam-pair-hue, 220), 85%, 96%);
}
.iam-match__item.is-connected .iam-match__dot {
  background: hsl(var(--iam-pair-hue, 220), 70%, 55%);
  border-color: hsl(var(--iam-pair-hue, 220), 70%, 45%);
}
/* results */
.iam-match__item.is-correct { border-color: var(--iam-success); background: var(--iam-success-light); }
.iam-match__item.is-correct .iam-match__dot { background: var(--iam-success); border-color: var(--iam-success); }
.iam-match__item.is-wrong   { border-color: var(--iam-error);   background: var(--iam-error-light); animation: iam-shake .35s ease; }
.iam-match__item.is-wrong .iam-match__dot { background: var(--iam-error); border-color: var(--iam-error); }
.iam-match__item.iam-match__nudge { animation: iam-shake .35s ease; }

/* ── Shared controls / completion (reuse drag-drop look) ── */
.iam-sort__controls, .iam-match__controls {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; margin-bottom: 1rem;
}
.iam-sort__complete, .iam-match__complete {
  background: var(--iam-success-light);
  border: 1.5px solid var(--iam-success);
  border-radius: var(--iam-radius);
  padding: 1rem 1.5rem; text-align: center;
  color: var(--iam-success); font-size: 1.05rem;
}

/* ── Mobile ── */
@media (max-width: 560px) {
  .iam-match__board { gap: .6rem; }
  .iam-match__item { padding: .6rem .7rem; font-size: .9rem; }
}