/* classification_lab.css — sort-and-check classifier (see classification_lab.js).
   Category columns are click targets; the student drops the current example into a group.
   `--c` (set per column) is that category's accent. */
.clab2-board { display: grid; gap: 0.6rem; align-items: stretch; }
.clab2-col {
  display: flex; flex-direction: column; min-height: 7rem;
  border: 1px solid color-mix(in srgb, var(--c, #94a3b8) 40%, rgba(255, 255, 255, 0.08));
  border-radius: 0.7rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c, #94a3b8) 8%, transparent), rgba(0, 0, 0, 0.22));
  overflow: hidden;
}
.clab2-col.is-live { cursor: pointer; transition: border-color 0.14s, box-shadow 0.14s, transform 0.08s; }
.clab2-col.is-live:hover, .clab2-col.is-live:focus-visible {
  border-color: var(--c, #94a3b8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #94a3b8) 22%, transparent); outline: none;
}
.clab2-col.is-live:active { transform: translateY(1px); }
.clab2-col.flash { animation: clab2-flash 0.4s ease; }
.clab2-colhead { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: color-mix(in srgb, var(--c, #94a3b8) 14%, transparent); }
.clab2-collabel { display: block; font-weight: 750; font-size: 0.98rem; color: color-mix(in srgb, var(--c, #94a3b8) 55%, #f1f5f9); }
.clab2-colrule { display: block; margin-top: 0.12rem; font-size: 0.76rem; line-height: 1.3; color: #94a3b8; }
.clab2-slots { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.55rem; flex: 1; }
/* empty + clickable → a faint, accent-tinted cue that this column is a target (and fills the void) */
.clab2-col.is-live .clab2-slots:empty { align-items: center; justify-content: center; }
.clab2-col.is-live .clab2-slots:empty::after {
  content: "tap to place"; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c, #94a3b8) 55%, #64748b); opacity: 0.7;
}
.clab2-chip {
  padding: 0.3rem 0.55rem; border-radius: 0.45rem; font-size: 0.85rem; font-weight: 600; color: #07121d;
  background: color-mix(in srgb, var(--c, #94a3b8) 78%, #e2e8f0); animation: clab2-pop 0.22s ease;
}

/* the example to place + the choice prompt */
.clab2-prompt { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.clab2-ask { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 700; }
.clab2-item {
  align-self: stretch; padding: 0.7rem 1rem; border-radius: 0.65rem; text-align: center;
  font-size: 1.2rem; font-weight: 700; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25));
}
.clab2-done { font-size: 1.1rem; font-weight: 700; color: #a7f3d0; }
.clab2-done b { color: #fff; }

.clab2-feedback { margin: 0; min-height: 1.2rem; font-size: 0.92rem; line-height: 1.5; color: #94a3b8; }
.clab2-feedback.is-ok { color: #a7f3d0; }
.clab2-feedback.is-bad { color: #fda4af; }
.clab2-feedback b { color: #f1f5f9; }

.clab2-bar { display: flex; align-items: center; gap: 0.6rem; }
.clab2-prog { font-size: 0.85rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

@keyframes clab2-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.6); border-color: #fb7185; } }
@keyframes clab2-pop { from { transform: scale(0.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .clab2-col.flash, .clab2-chip { animation: none; } }
@media (max-width: 440px) { .clab2-colrule { display: none; } }