/* NMT test layout; buttons, options and explanations reuse quiz.css. */
.zno-nmt { margin: 2em 0; }
.zno-nmt [hidden] { display: none !important; }
.zno-nmt__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em 1em;
  margin: 0 0 1.25em;
  padding: .6em .9em;
  border: 1px solid #d6e3ee;
  border-radius: 8px;
  background: #f6f9fc;
  font-size: .95em;
}
.zno-nmt__score { font-weight: 600; color: #004d80; }
.zno-nmt__finish { margin-left: auto; }
.zno-nmt:not(.is-interactive) .zno-nmt__bar { display: none; }

.zno-nmt__task {
  margin: 0 0 1.5em;
  padding: 1em 1.1em .5em;
  border: 1px solid #e3e9ef;
  border-radius: 8px;
  background: #fff;
  scroll-margin-top: 4em;
}
.zno-nmt__num { margin: 0 0 .5em; font-size: 1.05em; color: #004d80; }
.zno-nmt__topic { display: inline-block; margin-left: .4em; font-size: .78em; font-weight: 400; color: #707070; }
.zno-nmt__q { margin: 0 0 .6em; font-weight: 600; color: #222; }
.zno-nmt__context { margin: 0 0 .8em; padding: .6em .8em; border-left: 3px solid #c9d6e2; background: #f9fbfd; }
.zno-nmt__task.is-right .zno-nmt__num::after { content: " ✓"; color: #2e8540; }
.zno-nmt__task.is-wrong .zno-nmt__num::after { content: " ✗"; color: #c0392b; }

.zno-nmt__passage {
  margin: 0 0 1.5em;
  padding: 1em 1.1em;
  border: 1px solid #d6e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}
.zno-nmt__passage-title { margin: 0 0 .5em; font-weight: 600; color: #004d80; }
.zno-nmt__passage ol { margin: 0; padding-left: 1.4em; }
.zno-nmt__passage li { margin: 0 0 .4em; }

.zno-nmt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1.5em; margin: 0 0 .8em; }
.zno-nmt__left, .zno-nmt__right { margin: 0; padding-left: 1.4em; }
.zno-nmt__right { list-style: none; padding-left: 0; }
.zno-nmt__left li, .zno-nmt__right li { margin: 0 0 .45em; }

.zno-nmt__grid { border-collapse: collapse; margin: 0 0 .6em; width: auto; }
.zno-nmt__grid th, .zno-nmt__grid td { padding: 3px; border: 0; text-align: center; font-weight: 600; color: #0067ac; }
.zno-nmt__cell {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #c9d6e2;
  border-radius: 6px;
  background: #fff;
  color: #0067ac;
  font: inherit;
  font-weight: 700;
  line-height: 38px;
  cursor: pointer;
  box-shadow: none;
}
.zno-nmt__cell:disabled { cursor: default; }
.zno-nmt.is-interactive .zno-nmt__task:not(.is-done) .zno-nmt__cell:hover { border-color: #0067ac; background: #eef5fb; }
.zno-nmt__cell.is-selected { border-color: #0067ac; background: #dbeaf6; }
.zno-nmt__cell.is-correct { border-color: #2e8540; background: #e7f4ea; }
.zno-nmt__cell.is-correct::after { content: "✓"; color: #2e8540; }
.zno-nmt__cell.is-chosen-wrong { border-color: #c0392b; background: #fbeceb; }
.zno-nmt__cell.is-chosen-wrong::after { content: "✕"; color: #c0392b; }
.zno-nmt__actions { margin: 0 0 .6em; }
.zno-nmt__pairs { margin: .4em 0 0; font-weight: 600; }
.zno-nmt__theory { margin: .5em 0 0; }
.zno-nmt.is-interactive .zno-nmt__task:not(.is-done) .zno-quiz__explain { display: none; }
.zno-nmt__mistakes { columns: 2 14em; margin: 0 0 .6em; }
.zno-nmt__reset-wrap { text-align: center; }

@media (max-width: 600px) {
  .zno-nmt__cols { grid-template-columns: 1fr; }
  .zno-nmt__task { padding: .9em .8em .3em; }
  .zno-nmt__cell { width: 36px; height: 36px; line-height: 34px; }
}