/*
 * BudgetRowComponent inside a .budget-list: each budget a card, the same
 * shape as .objective-list/.objective-row (DESIGN.md §5) -- badge, then the
 * wording as a link to the budget's page, then its detail lines.
 */
@layer components {
  .budget-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;

    & > li + li {
      margin-block-start: 0;
    }
  }

  .budget-row {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);

    &:hover {
      border-color: var(--color-text);
    }

    & > * {
      margin: 0;
      max-inline-size: none;
    }
  }

  /* The wording links to the budget's page; it reads as the card's heading. */
  .budget-row__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    & .title-form {
      flex: 1;
    }
  }

  .budget-row__open {
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

  .budget-row__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font: var(--text-small);
    color: var(--color-muted);

    & span + span::before {
      content: "· ";
    }
  }

  .budget-row__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font: var(--text-small);
    color: var(--color-text);
  }

  .budget-row__meter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font: var(--text-small);
    color: var(--color-muted);
  }

  /* Attention role (DESIGN.md §2.3): the tint carries it, never orange text. */
  .budget-row__over-funded {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--color-attention-surface);
    color: var(--color-ink);
    font-weight: 500;
  }

  .budget-row__deadline {
    font: var(--text-small);
    color: var(--color-muted);
  }

  .budget-row__deadline--overdue {
    color: var(--color-negative);
    font-weight: 500;
  }

  /* Archived: listed last, faded, still opens its page (DESIGN.md §5). */
  .budget-row--archived {
    background: var(--color-surface-2);

    & > :not(.budget-row__title) {
      opacity: 0.6;
    }

    & .budget-row__open {
      color: var(--color-muted);
    }
  }
}