/* Niet or geen: geen in the site's orange, niet in its green, so the two
   answers read apart at a glance on the sheet, the helper and the quiz. */

.ng-geen { color: var(--accent-dark); }
.ng-niet { color: var(--workbook-ink); }

.cs-col.is-geen { background: var(--accent-light); border-color: var(--accent); }
.cs-col.is-niet { background: var(--workbook-sage); border-color: var(--workbook-ink); }
.cs-col.is-geen h3 { color: var(--accent-dark); }
.cs-col.is-niet h3 { color: var(--workbook-ink); }

/* --- decision helper --- */
.ng-decision { border-top: 3px solid var(--workbook-ink); }
.ng-step { margin-top: 18px; }
.ng-question { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.ng-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ng-option { min-height: 52px; padding: 12px 16px; border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 10px; background: var(--card); color: var(--text); font: 600 14.5px/1.4 'DM Sans', sans-serif; text-align: left; cursor: pointer; }
.ng-option:hover { border-color: var(--workbook-ink); color: var(--workbook-ink); }
.ng-result { padding: 16px 18px; border-radius: 12px; border-left: 5px solid; }
.ng-result.is-geen { background: var(--accent-light); border-color: var(--accent); }
.ng-result.is-niet { background: var(--workbook-sage); border-color: var(--workbook-ink); }
.ng-result-word { font-size: 16px; }
.ng-result-word strong { font: 700 32px 'Playfair Display', Georgia, serif; }
.ng-result.is-geen .ng-result-word strong { color: var(--accent-dark); }
.ng-result.is-niet .ng-result-word strong { color: var(--workbook-ink); }
.ng-result-why { margin-top: 4px; font-size: 14.5px; line-height: 1.65; }
.ng-result-examples { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; }
.ng-restart { margin-top: 8px; }

/* --- quiz --- */
.ng-quiz-sentence { margin: 18px 0 4px; font: 700 30px/1.35 'Playfair Display', Georgia, serif; text-align: center; }
.ng-blank { display: inline-block; min-width: 2.6em; border-bottom: 3px dashed var(--text-muted); color: transparent; }
.ng-quiz-english { margin-bottom: 14px; text-align: center; }
.ng-score { font-size: 40px; }
.cs-choice.is-geen { color: var(--accent-dark); border-color: var(--accent); }
.cs-choice.is-niet { color: var(--workbook-ink); border-color: var(--workbook-ink); }
.cs-choice.is-geen:hover:not(:disabled), .cs-choice.is-geen.is-right { background: var(--accent-light); }
.cs-choice.is-niet:hover:not(:disabled), .cs-choice.is-niet.is-right { background: var(--workbook-sage); }
/* This file loads after cheat-sheet.css, so restate the wrong-answer colours. */
.cs-choice.is-geen.is-wrong, .cs-choice.is-niet.is-wrong { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

@media (max-width: 700px) {
  .ng-options { grid-template-columns: 1fr; }
  .ng-option { min-height: 48px; }
  .ng-quiz-sentence { font-size: 24px; }
  .ng-result-word strong { font-size: 28px; }
}