/*
 * The budget page (spec 008, User Story 2): the list's own New budget card
 * (/budgets) and a budget's own page (/budgets/:id) -- header meta, the
 * totals row, the Costs/Income/Hours sections and their inline new-line
 * cards, the hour allocation rows and the capacity warning list.
 */
@layer components {
  /* Header meta: state badge, currency, deadline, one line, small and muted
     -- overrides .page-heading's own <p> (lead, muted) for this one line. */
  .budget-page .budget-page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font: var(--text-small);
    color: var(--color-muted);
  }

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

  /* The grant / plan objective links, same small-muted treatment as the
     budget row's own .budget-row__links. */
  .budget-page .budget-page__links {
    font: var(--text-small);
    color: var(--color-muted);
  }

  /* Totals row: the three .stat figures, then the funded meter pinned to
     the end. The section's own h2 + * rule (base.css) already spaces this
     div from the "Totals" eyebrow above it. */
  .budget-page__totals {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-8);

    & > * {
      margin: 0;
    }

    & > .budget-totals__meter {
      margin-inline-start: auto;
      align-self: center;
    }
  }

  .budget-totals__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 --
     same treatment as .budget-row__over-funded on the list. */
  .budget-totals__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;
  }

  /* A missing figure (no hourly rate recorded): subtle, not a real value. */
  .budget-page__missing {
    color: var(--color-subtle);
    font-style: italic;
  }
}