/* The vocab-match exercise (plans/material-assignment-kinds.md P3): the
 * two columns of cards and their states. */

@import url('page.css');

:root {
  --card-bg: #ffffff;
  --card-border: #c8c8c8;
  --card-selected: #1d6fd8;
  --card-matched-bg: #e6f4ea;
  --card-matched-fg: #2e7d32;
  --card-wrong: #b00020;
  --state-warn: #b8860b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --card-bg: #1f1f1f;
    --card-border: #555;
    --card-selected: #7ab3ff;
    --card-matched-bg: #1d3a24;
    --card-matched-fg: #8fd19e;
    --card-wrong: #ff6b7a;
    --state-warn: #e0b84a;
  }
}

:root[data-theme='dark'] {
  --card-bg: #1f1f1f;
  --card-border: #555;
  --card-selected: #7ab3ff;
  --card-matched-bg: #1d3a24;
  --card-matched-fg: #8fd19e;
  --card-wrong: #ff6b7a;
  --state-warn: #e0b84a;
}

#vocab-match .intro,
#vocab-match .due,
#vocab-match .best,
#vocab-match .completion {
  max-width: 40em;
}

#vocab-match .completion.late { color: var(--state-warn); }
#vocab-match .completion.too-late { color: var(--card-wrong); }
#vocab-match .preview-note { font-style: italic; }

#vocab-match .round-status {
  display: flex;
  justify-content: space-between;
  max-width: 60em;
}

#vocab-match .columns {
  display: grid;
  grid-template-columns: minmax(10em, 1fr) minmax(16em, 2fr);
  gap: 0.75em 1.5em;
  max-width: 60em;
  align-items: start;
}

#vocab-match .column {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

#vocab-match .card {
  font: inherit;
  text-align: left;
  padding: 0.6em 0.8em;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: inherit;
  cursor: pointer;
  line-height: 1.3;
  transition: border-color 0.1s, transform 0.1s;
}

#vocab-match .card.word {
  font-weight: 600;
}

#vocab-match .card:hover:not(:disabled) {
  border-color: var(--card-selected);
}

#vocab-match .card.selected {
  border-color: var(--card-selected);
  box-shadow: 0 0 0 2px var(--card-selected);
}

#vocab-match .card.matched,
#vocab-match .card.matched:disabled {
  background: var(--card-matched-bg);
  border-color: var(--card-matched-fg);
  color: var(--card-matched-fg);
  opacity: 0.7;
  cursor: default;
}

#vocab-match .card.wrong {
  border-color: var(--card-wrong);
  box-shadow: 0 0 0 2px var(--card-wrong);
  animation: shake 0.4s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Quiz mode: the pairs made so far, word and definition side by side. */
#vocab-match #paired {
  max-width: 60em;
  margin-top: 1.5em;
}

#vocab-match #paired h2 {
  font-size: 1.1em;
  margin: 0 0 0.5em;
}

#vocab-match .paired-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

#vocab-match .paired-list .pair {
  display: grid;
  grid-template-columns: minmax(10em, 1fr) minmax(16em, 2fr) auto;
  gap: 0.75em 1.5em;
  align-items: center;
}

/* In the list the cards are just labels: no hover, no pointer. */
#vocab-match .paired-list .card {
  cursor: default;
}

#vocab-match .paired-list .card:hover {
  border-color: var(--card-border);
}

#vocab-match .unpair {
  font: inherit;
  font-size: 0.9em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

#vocab-match .unpair:hover {
  border-color: var(--card-selected);
}

#vocab-match button.primary {
  font-size: 1.1em;
  padding: 0.5em 1.2em;
}

#vocab-match .record-status {
  font-style: italic;
}

@media (max-width: 600px) {
  #vocab-match .columns {
    grid-template-columns: 1fr;
  }
  #vocab-match .paired-list .pair {
    grid-template-columns: 1fr auto;
  }
  #vocab-match .paired-list .pair .definition {
    grid-column: 1 / -1;
  }
}