/* Tick cards: a choice drawn as a card, with a green tick when chosen (the create account terms and news choices, the news choice on Settings).
   A real checkbox, hidden, with the card as its label. */
.tick-card {
  position: relative;
  display: flex;
  align-items: flex-start; /* centred from 576px, below */
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  cursor: pointer;
}

.tick-card--error {
  border-color: var(--c-error);
}

.tick-card__icon {
  flex: none;
  display: none; /* shown from 576px, below */
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  background-color: var(--c-panel);
  border-radius: 50%;
}

.tick-card__text {
  flex: 1;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.tick-card__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-text);
}

/* Hidden but still there for keyboards and screen readers. */
.tick-card__input {
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  opacity: 0;
}

.tick-card__tick {
  order: -1; /* first on phones; last from 576px, below */
  flex: none;
  margin-top: var(--sp-1);
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  font-size: var(--fs-small);
  color: transparent;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: 50%;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.tick-card__input:checked + .tick-card__tick {
  color: var(--c-on-dark);
  background-color: var(--c-tick);
  border-color: var(--c-tick);
}

.tick-card__input:focus-visible + .tick-card__tick {
  box-shadow: var(--focus-ring);
}

/* Phones: no round icon, and the tick at the top left, so the words get almost the full width.
   From 576px: the icon on the left and the tick on the right, both in the middle. */
@media (min-width: 576px) {
  .tick-card {
    align-items: center;
  }

  .tick-card__icon {
    display: grid;
  }

  .tick-card__tick {
    order: 0;
    margin-top: 0;
  }
}

/* The terms error sits under its card, like a field's. */
.tick-card + .field__error {
  margin-top: calc(-1 * var(--sp-2));
}