/*
 * One requirement of the demonstration procedure, offered as a card: the
 * evidence type names it, and under the rule stands whom it would be asked of
 * and the button that asks.
 *
 * The two sit at either end of the line, and wrap under one another where the
 * card is too narrow for both — the sentence keeps its own room rather than
 * squeezing the button out of the card.
 */
.requirement-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}

/*
 * A refusal takes the whole line, where the document and the button shared it:
 * nothing shares it with a sentence that is the whole of what the card has
 * left to say.
 *
 * The wording is the portal's own and wears the error colour; the country is
 * not, and keeps its own — the emphasis stops at the box, in the translation as
 * on the screen.
 */
.requirement-card__refusal {
  flex: 1 1 100%;
}

.requirement-card__refusal strong {
  color: var(--text-default-error);
}

/*
 * A requirement no provider serves, outlined in the colour the DSFR gives an
 * error. An outline and not a ground: the card is read for what it says, and a
 * colour behind every word of it competes with the words. It leaves the marks
 * inside untouched — what the directories publish keeps the blue it wears on
 * every other card, being the same kind of value here as there.
 *
 * The colour is never the whole of what says so — the card's own wording and
 * the sign beside it do too (RGAA 3.1) — and it is the token, not a literal:
 * the layout sets `data-fr-scheme="system"`, so the dark theme is reachable.
 */
.requirement-card--unsatisfiable {
  border: 1px solid var(--border-plain-error);
}

/*
 * The card of a requirement the document has come back for. The user is looking
 * for what their procedure still needs, and a card they can stop thinking about
 * says so at a glance, before the sentence inside it is read.
 *
 * Read from the zone rather than set on the card: what became of a click is
 * known where the button is, and the zone is replaced under a card that is not —
 * so `:has` is what lets the card follow an answer it never receives itself.
 *
 * The colour is never the whole of what says so: the zone states it in words
 * and marks it with a check (RGAA 3.1). The border reinforces, it does not
 * inform.
 */
.requirement-card:has(.demo-request__body[data-outcome="delivered"]) {
  border: 1px solid var(--border-plain-success);
}