/* Zirva – matching and open-answer questions. */

/* matching: tap one on each side; a right pair flashes green, then rests grey */
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding:24px 0 32px}
.match .col{display:flex;flex-direction:column;gap:12px}
.mt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:0 12px;border:0;border-radius:13px;background:var(--color-surface);color:var(--color-text);font:var(--type-body-lg);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 #D6D0C3}
.mt.sel{box-shadow:inset 0 0 0 2px var(--color-text);transform:translateY(2px)}
.mt.just{background:var(--color-success-tint);color:var(--color-success);box-shadow:inset 0 0 0 2px var(--color-success);animation:pop 380ms var(--ease-spring) both}
.mt.got{background:var(--color-surface-sunken);color:var(--color-text-tertiary);box-shadow:none}
.mt.got i,.mt.just i{font-size:16px}
.qz-hint{margin-top:10px;font:var(--type-body-md);color:var(--color-text-secondary)}

/* open answer: the text is the work; the counter and who reads it stay quiet */
.open-a{margin-top:24px;min-height:200px;font:var(--type-body-lg);line-height:28px;padding:16px}
.open-a .caret{display:inline-block;width:2px;height:22px;background:var(--color-focus);vertical-align:-4px;margin-left:1px}
.open-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.open-meta .who{display:inline-flex;align-items:center;gap:8px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.open-meta .av{width:28px;height:28px;font-size:12px}
.open-meta b{font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}

@media (min-width:900px){
  .match{margin-top:48px;max-width:640px}
  .open-a{max-width:640px}
}
@media (prefers-reduced-motion:reduce){.mt.just{animation:none}}