[Task] Cost Indicator + Mobile Cost Bar

[conorluddy]

Context

Part of #8 (Web Components Migration).

Cost visualisation — shows estimated relative cost as a fill bar with dollar signs, plus a per-slider breakdown. Mobile gets a sticky bottom bar with the same info.

Scope

Create:

• src/components/tb-cost-indicator.js — <tb-cost-indicator> cost bar + breakdown
• src/components/tb-mobile-cost-bar.js — <tb-mobile-cost-bar> sticky bottom bar

Read (reference only):

• index.html lines 1822-1849 (ui.costIndicator())
• index.html lines 1937-1977 (renderCostIndicator())
• index.html CSS for .cost-indicator, .cost-bar-bg, .cost-bar-fill, .cost-breakdown, .cost-row, .mobile-cost-bar

Current State

ui.costIndicator() builds a card with header (title + dollar label), fill bar, and per-slider breakdown rows. renderCostIndicator() calls computeCost(state) for the 0-1 ratio, maps to color + dollar text, updates fill width + breakdown percentages. Mobile bar mirrors the main cost bar.

Target State

• <tb-cost-indicator>: Shadow DOM. Accepts cost (0-1 ratio) and breakdown (array of {id, pct, intensity}) as properties. Renders cost bar, dollar label, color-coded fill, and breakdown rows. Pure display — no store subscription (parent pushes data).

• <tb-mobile-cost-bar>: Shadow DOM. Accepts cost (0-1 ratio) property. Fixed bottom positioning. Shows fill bar + dollar signs. Hidden on desktop via CSS media query.

Implementation Hints

• Color mapping: ratio <=0.2 green, <=0.4 light green, <=0.6 amber, <=0.8 orange, >0.8 red
• Dollar text: $, $$, $$$, $$$$, $$$$$
• Min fill width: 5% (so empty state still shows a sliver)
• Breakdown uses COST_LABELS from data.js for row labels
• The cost indicator is placed in a slot within <tb-slider-panel> or as a sibling

Dependencies

• [Task] Reactive Store + Core Logic Modules #9 — Logic module (computeCost(), computeCostBreakdown())
• [Task] Data Modules + Design Token Extraction #10 — Data modules (COST_LABELS) + style sheets

Definition of Done

• <tb-cost-indicator> renders fill bar with correct width/color for given cost ratio
• Dollar label shows correct tier ($-$$$$$)
• Breakdown rows show per-slider percentages
• <tb-mobile-cost-bar> renders fixed bottom bar on mobile viewports
• Mobile bar hidden on desktop (media query)
• Both adopt shared Constructable Stylesheets
• Custom elements registered

Verification

1. Set cost = 0.7 on <tb-cost-indicator> — verify orange fill at 70%, "$$$$" label
2. Set cost = 0.1 — verify green fill, "$" label
3. Resize browser to mobile width — verify <tb-mobile-cost-bar> appears
4. Resize to desktop — verify mobile bar hidden