Mounts a billing-state pill in the topbar that reads useTrialBanner() and
renders the appropriate label / tone / CTA per spec:
- pristine / warning → "Pro trial · Nd" (info → warning amber as days drop)
- urgent → "Pro trial · today" (warning amber, semibold)
- expired → "Trial expired — pick a plan" → /account/billing/select-plan
- paid → planBilling.display_name (quiet)
- complimentary → "Complimentary Pro" (accent, no CTA)
- past_due → "Payment failed — update card" → /account/billing
- canceled → "Reactivate" → /account/billing/select-plan
- null → hidden
Uses existing design-system tokens only (text-info/bg-info-dim,
text-warning/bg-warning-dim, text-danger/bg-danger-dim, text-accent/
bg-accent-dim, text-muted-foreground/bg-elevated). Clickable variants
render as react-router-dom <Link>s and are keyboard-focusable with an
accent focus-visible ring. Mobile collapses the label to a clock icon
with a title attribute carrying the full text.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
