/**
 * Dashboard setup nag list.
 *
 * Deliberately quiet. These are nags the user is free to ignore, not alerts,
 * so nothing here uses warning colouring. The card removes itself once setup
 * is complete, so it never becomes furniture a long-standing user learns to
 * scroll past.
 */

.setup-checklist {
  border: 1px solid #e6e2f2;
  border-radius: 12px;
  background: #faf9fd;
  box-shadow: none;
}

.setup-checklist__title {
  color: #1a1240;
  font-size: 0.95rem;
}

/* The items run inline, not stacked.
 *
 * Stacked, this list grows a row taller for every setup task added, and the
 * list is going to get longer. Inline it grows sideways and then wraps, so
 * adding tasks costs a fraction of the vertical space and the card stays a
 * strip at the top of the dashboard rather than becoming a panel.
 *
 * Three rules here existed only to make a vertical column read well, and all
 * three are wrong once the items sit side by side:
 *
 *   max-width: 640px on the list, so the action button did not drift an inch
 *   from the text it belonged to. Inline, each item is its own unit and carries
 *   its own cap instead.
 *
 *   border-top between rows, which is a horizontal divider for a vertical list.
 *   The gap separates them now.
 *
 *   min-width: 8.5rem on the buttons, so a column of them shared a left edge.
 *   There is no column any more, and forcing 8.5rem just pads every item out.
 */
.setup-checklist__items {
  display: flex;
  flex-wrap: wrap;
  /* Column gap wider than the row gap: the eye needs more help telling two
     items apart side by side than it does stacked. */
  gap: 0.5rem 1.75rem;
}

.setup-checklist__item {
  /* Sizes to content, up to a cap. Without the cap one long help line makes a
     single item as wide as the card and pushes everything else onto its own
     row, which is the stacked layout again by another route. */
  flex: 0 1 auto;
  max-width: 24rem;
  align-items: center;
}

.setup-checklist__items > li + li {
  border-top: 0;
}

.setup-checklist__item .btn {
  white-space: nowrap;
  align-self: center;
}

.setup-checklist__icon {
  color: #b9b2d0;
  line-height: 1;
}

/* Done items recede rather than celebrate. Finishing setup is the absence of
   a chore, not an achievement. */
.setup-checklist__item .setup-checklist__icon svg[class*="check"],
.setup-checklist__icon .bi-check-circle-fill {
  color: #4f9d69;
}

.setup-checklist__label {
  color: #1a1240;
  font-size: 0.9rem;
}

.setup-checklist__help {
  color: #6f6a85;
  font-size: 0.8rem;
  margin-top: 2px;
}

/* On a narrow screen the items wrap to one per line, which is the stacked
   layout again and correct there: side by side needs width to be worth having.
   The button drops under its text as it did before. */
@media (max-width: 575.98px) {
  .setup-checklist__item {
    flex-wrap: wrap;
    max-width: none;
    align-items: flex-start;
  }

  .setup-checklist__item .btn {
    margin-top: 6px;
    margin-left: 28px;
  }
}