/* Matching connections: colours inherit the website palette. */
.match-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.3fr); isolation: isolate; margin-bottom: var(--space-4); }
.match-column { display: grid; grid-auto-rows: 1fr; gap: var(--space-3); z-index: 1; }
.match-right { grid-column: 3; }
.match-card { position: relative; min-width: 0; min-height: 88px; padding: var(--space-3) var(--space-4); text-align: left; font: inherit; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); cursor: pointer; overflow-wrap: anywhere; }
.match-card.is-linked { border-color: var(--match-color); }
.match-card[aria-pressed="true"] { outline: 2px solid var(--color-pink); outline-offset: 3px; background: color-mix(in srgb, var(--color-pink) 10%, var(--bg-primary)); }
.match-card:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }
.match-dot { position: absolute; top: calc(50% - 9px); width: 18px; height: 18px; border: 2px solid var(--match-color, var(--color-pink)); border-radius: var(--radius-full); background: var(--bg-primary); touch-action: none; cursor: crosshair; }
.match-dot::after { content: ''; position: absolute; inset: -13px; }
.match-left .match-dot { right: -10px; }
.match-right .match-dot { left: -10px; }
.match-card.is-linked .match-dot { background: var(--match-color); }
.match-pair-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
.match-card.is-linked .match-pair-label { color: var(--match-color); }
.match-feedback { display: block; margin-top: var(--space-2); }
.match-feedback:empty { display: none; }
.match-feedback.is-incorrect { color: var(--color-error); font-weight: var(--weight-semibold); }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.match-line { fill: none; stroke: var(--match-color); stroke-width: 2.5; }
.match-line.is-pending { stroke-dasharray: 5 5; }
.match-count, .match-status { font-size: var(--text-sm); color: var(--text-secondary); }
.match-status { margin-top: var(--space-3); }
/* Reuse PA brand and existing course semantic tokens, including dark mode. */
.match-color-pink { --match-color: var(--color-pink); }
.match-color-warning { --match-color: var(--color-warning); }
.match-color-success { --match-color: var(--color-success); }
.match-color-ink { --match-color: var(--text-primary); }
.match-color-muted { --match-color: var(--text-tertiary); }
.match-color-outline { --match-color: var(--border-secondary); }
@media (max-width: 600px) {
  .quiz-block.drag-match { padding: var(--space-4); }
  .match-board { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.2fr); }
  .match-card { padding: var(--space-3) var(--space-2); }
}