The Problem
The explorer page had accumulated styling that felt dated and heavy-handed. Coloured left-border accents appeared on both bracket sections and occupation cards, creating visual noise. The proportion bar on each card communicated less than a dot visualisation would. Embedded compare links on every card added clutter without earning their space. And cards required a precise title-click to navigate -- missing the card body did nothing.
These were not functional bugs. The page worked. But the visual impression was cluttered and the interaction model was unnecessarily precise. I wanted cleaner cards, a modern section heading treatment, and the dot strip visualisation from the detail page brought down to the card level.
What I Built
Section heading restyle (Phase 27)
I changed the ScoreBracketSection heading format from range-first ("60%+ -- High Exposure") to label-first ("High Exposure (60%+)"). The coloured left border on the section was replaced with a 2px accent underline on the heading text itself, matching the motivka Header.svelte compact nav link pattern. The section background tint -- a subtle color-mix() wash -- was retained because it provides useful visual grouping without the heaviness of a border.
Card dot strip (Phase 27)
I built CardDotStrip.svelte -- a static, non-interactive dot strip derived from the detail page TaskDotStrip. It renders 10 dots per row, coloured by automation level (full, partial, human), with no click handlers or expand panels. The dot strip gives a much better visual fingerprint of each occupation's task breakdown than the old proportion bar did. You can see at a glance not just the ratio but the actual count of tasks at each level.
Card restyle (Phase 27)
The occupation card lost its coloured left border and bracket-tinted background. It now uses the standard .glass-panel background via var(--card-bg). The compare link was removed entirely -- comparison is accessible from the detail page. The entire card is now clickable: clicking anywhere navigates to /occupation/{id}. The TaskProportionBar was replaced with the new CardDotStrip.
Motivka embed sync (Phase 28)
All three updated components -- ScoreBracketSection, CardDotStrip (new), and OccupationCard -- were ported to the motivka lib/imouto/components/ directory. Styles helpers were updated where needed. Both bun run check and bun run build pass cleanly in motivka. Visual parity between standalone and embed was confirmed.
Triage and documentation (Phases 29-30)
Triage found nothing to fix -- zero failures across all 4 tasks. Architecture documentation was refreshed with the updated section description, a context note on TaskProportionBar (still used in the detail page, just removed from cards), and the card vs. section tint distinction.
What is Next
The detail page and compare page visual updates are separate initiatives. Interactive dot strips on cards are not planned -- the detail page handles task-level interactivity. No changes to the filter toolbar or sort controls were in scope here.