/* Needs: what a thing still needs, one line each (17 Oct 2026, the polish round). ✓ in ink where met;
   ! in a small circle on the flag's soft yellow with its darker rim where not; the whole line grey
   where not yet relevant. Never red: red is a refusal. */
.needs-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-meta);
}

.needs-line {
  display: grid;
  grid-template-columns: var(--need-mark) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

.needs-list-labelled {
  font-size: var(--text-sm);
}

.needs-list-labelled .needs-line {
  grid-template-columns: var(--need-mark) var(--need-label-column) minmax(0, 1fr);
}

.needs-mark {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--need-mark);
  height: var(--need-mark);
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: var(--weight-strong);
  line-height: 1;
}

.needs-line-met .needs-mark {
  color: var(--color-ink);
}

.needs-line-missing .needs-mark {
  border: var(--hairline) solid var(--color-flag-rule);
  border-radius: 50%;
  background: var(--color-flag);
  color: var(--color-flag-ink);
}

.needs-line-not-yet {
  color: var(--color-muted);
}

.needs-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-meta);
}

.needs-line-not-yet .needs-label {
  color: var(--color-muted);
}