/* Budget & bidding (clients/lenses/_budget): where its kit pieces sit. Each
   platform's month is a Card — its figures outline Items, its pace two
   Progress bars, the plan form the kit's fields — then the campaigns' table,
   the changes in flight (Items) and the guardrails form. */
@layer components {
  .budget-lens {
    min-inline-size: 0;
  }

  .budget-lens__platforms {
    align-items: start;
  }

  /* One platform's month: the figures, the bars, the plan form. */
  .budget-pacing {
    min-inline-size: 0;
  }

  .budget-pacing__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Plan, spent, projected: as many to a line as fit. */
  .budget-pacing__figures {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    margin: 0;

    dd {
      margin: 0;
    }
  }

  /* Plan spent over month gone, one above the other. */
  .budget-meter {
    display: grid;
    gap: 0.75rem;
  }

  /* Month, amount and the button on one line, wrapping when narrow. */
  .budget-plan-form {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .budget-campaigns__row td {
    vertical-align: top;
  }

  /* Under a campaign's name its platform, under its verdict the reason, on a
     line of their own. */
  .budget-campaigns__platform,
  .budget-campaigns__reason {
    display: block;
  }

  .budget-campaigns__reason {
    max-inline-size: 18rem;
    white-space: normal;
  }

  /* The changes in flight: Items edge to edge with the card's content. */
  .budget-changes > .ui-item {
    padding-inline: 0;
  }

  /* The guardrails form is the card's body and footer. */
  .budget-guardrails {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}