:root {
  --question-annulled-border: #b42318;
  --question-annulled-surface: #fee4e2;
  --question-annulled-badge: #fee4e2;
  --question-annulled-badge-text: #912018;
  --question-annulled-text: #912018;
  --question-annulled-focus: #7a271a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --question-annulled-border: #fda29b;
    --question-annulled-surface: #55160c;
    --question-annulled-badge: #55160c;
    --question-annulled-badge-text: #fecdca;
    --question-annulled-text: #fecdca;
    --question-annulled-focus: #f97066;
  }
}

.question-state--annulled {
  border: 3px solid var(--question-annulled-border) !important;
}

.question-state-annulled {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: .75rem 0;
  padding: .75rem 1rem;
  border-inline-start: 5px solid var(--question-annulled-border);
  border-radius: .5rem;
  background: var(--question-annulled-surface);
  color: var(--question-annulled-text);
}

.question-state-annulled__badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--question-annulled-badge);
  color: var(--question-annulled-badge-text);
  border: 1px solid var(--question-annulled-border);
  font-weight: 800;
  letter-spacing: .035em;
}

.question-state-annulled__notice { margin: .2rem 0 0; font-weight: 650; }

.question-state-annulled:focus-visible,
.question-state--annulled:focus-visible {
  outline: 3px solid var(--question-annulled-focus);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .question-state--annulled,
  .question-state-annulled {
    border-color: CanvasText !important;
    forced-color-adjust: none;
  }
  .question-state-annulled__badge {
    background: CanvasText;
    color: Canvas;
  }
}

@media (max-width: 540px) {
  .question-state-annulled { flex-direction: column; padding: .7rem .8rem; }
}