/* One correction list item. */

ol.corrections {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  counter-reset: corrections;
}

ol.corrections li {
  position: relative;
  counter-increment: corrections;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-7);
  border: var(--border-thick);
  background: var(--paper-soft);
  transition: background 80ms ease, transform 60ms ease;
}
ol.corrections li::before {
  content: counter(corrections);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--size-2);
  color: var(--ink);
  opacity: 0.5;
}
ol.corrections li.active {
  background: var(--accent-soft);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.phrase-change {
  font-family: var(--font-mono);
  font-size: var(--size-3);
  margin-bottom: var(--space-1);
}
.phrase-change .from { text-decoration: line-through; opacity: 0.55; }
.phrase-change .arrow { margin: 0 var(--space-2); opacity: 0.55; }
.phrase-change .to { font-weight: var(--weight-bold); color: var(--ok); }

.meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--size-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meta .category { font-weight: var(--weight-bold); }
.meta .badge {
  padding: 2px var(--space-2);
  font-weight: var(--weight-bold);
  border: var(--border-thin);
}
.meta .badge.bokmaal { background: var(--ink); color: var(--paper); }

.explanation {
  font-family: var(--font-body);
  font-size: var(--size-3);
  line-height: var(--line-body);
}