/* The issue-review Approve card (#4147), on the Issues page and Billing's
 * Prices tab (issue-cards.ts issueApproveHtml): a header with the price and
 * the actions, then today's usage as bars. Tokens only. */
.ic-approve { display: flex; flex-direction: column; gap: var(--space-3); }
.ic-approve > p { margin: 0; }
.ic-approve-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.ic-approve-head h2 { margin: 0; }
.ic-approve-price { margin: 2px 0 0; font: var(--type-meta); color: var(--fg-muted); }
.ic-approve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.ic-approve-group { display: flex; align-items: center; gap: var(--space-2); }
.ic-approve-label { font: var(--type-label); color: var(--fg-muted); }
.ic-approve .segmented button { padding: 6px 12px; }
.ic-approve-waiting { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--fg-strong); }
.ic-approve-waiting[hidden] { display: none; }
.ic-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
@media (max-width: 640px) { .ic-bars { grid-template-columns: 1fr; } }
.ic-bars:empty { display: none; }
.ic-bar-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); }
.ic-bar-figure { font-weight: 600; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.ic-approve-note { font: var(--type-meta); }