/* KPI cards and progress bars. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 12px;
}

/* Cards in a row share a height (grid stretch) and lay out as a column, so
   the .foot line can push itself to the bottom edge of every card.
   Every card is the same surface: what it is about is carried by the coloured
   icon in its top-right corner, not by a different background. One --tone per
   card drives that icon and the progress fill. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  /* --tone paints the icon and the progress fill, --tone-ink is the same
     colour darkened to the point where the 11px link in .foot clears AA. */
  --tone: var(--blue);
  --tone-ink: var(--blue-ink);
}

.card.t-red {
  --tone: var(--red);
  --tone-ink: var(--red-ink);
}

.card.t-orange {
  --tone: var(--orange);
  --tone-ink: var(--orange-ink);
}

.card.t-green {
  --tone: var(--green);
  --tone-ink: var(--green-ink);
}

.card.t-purple {
  --tone: var(--purple);
  --tone-ink: var(--purple-ink);
}

.card.t-ink {
  --tone: var(--text);
  --tone-ink: var(--text);
}

.card .label {
  /* Still smaller than the 30px value, so the card keeps a first and a second
     voice, but heavy enough to be read as the card's title. */
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
  /* Room for the icon, so a long label never runs under it. */
  padding-right: 44px;
  /* Air between the title and the number it introduces. */
  margin-bottom: 10px;
}

/* The icon square: the badge corner shape, tinted with the card's own tone. */
.card-ico {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 30%;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb,var(--tone) 14%,var(--card));
  color: var(--tone);
}

.card-ico svg {
  display: block;
}

/* Progress track: one grey groove on every card, filled in the card's tone. */
.bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 7px;
  background: var(--card2);
}

.bar > i {
  display: block;
  height: 100%;
  width: var(--w,0%);
  background: var(--tone,var(--green));
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-top: 7px;
}

/* In a card the foot is the bottom line: it takes the slack, so cards that
   share a row have their feet on the same baseline whatever is above them.
   The 7px stays as padding, as the minimum gap when there is no slack. */
.card .foot {
  margin-top: auto;
  padding-top: 7px;
}

.card2 {
  background: var(--card2);
}

.card .foot a {
  font-weight: 500;
  color: var(--tone-ink);
}

.cards.four {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}

@media (max-width:900px) {
  .cards.four {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* On a phone two columns leave about 126px for a 30px amount such as
   "5 200,00 €", which then runs out of the card. One card per row instead,
   and the amount may fall to a second line rather than overflow. */
@media (max-width:560px) {
  .cards,
  .cards.four {
    grid-template-columns: 1fr;
  }
  .card .big {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .card .foot {
    flex-wrap: wrap;
  }
}