Feedback FAB: stays visible on mobile (icon-only) + precision-blue outline against dark footer

What was done

Two changes to the feedback FAB in src/layouts/BaseLayout.astro:

1. Mobile behavior changed from “hide” to “icon-only circle.” Previously: @media (max-width: 600px) { .feedback-fab { display: none; } } removed the affordance entirely on phones. Now: the button collapses to a 48×48 circle showing only a chat-bubble SVG icon. Tap target is comfortably above WCAG’s 44×44 minimum.
2. Added 2px precision-blue border (var(--color-precision-blue)) on all viewports. The button was black-on-dark when scrolled over the footer’s section-dark background — visually disappeared. The brand-blue outline keeps it readable everywhere without requiring a background change.

Implementation detail

The button now contains three children — an SVG icon (.feedback-fab-icon), a text label (.feedback-fab-label), and an arrow glyph (.feedback-fab-arrow). Default visibility:

Element	Desktop	Mobile (≤600px)
.feedback-fab-icon (SVG)	hidden	shown
.feedback-fab-label (“Feedback”)	shown	hidden
.feedback-fab-arrow (”→“)	shown	hidden

The SVG is a stroke-only chat-bubble glyph (24×24 viewBox, 20×20 rendered) that inherits currentColor from the button’s color property — so it picks up white when the button is black, and stays white when the button is hover-blue.

Files affected

Modified

• src/layouts/BaseLayout.astro — FAB markup (icon SVG + named spans), CSS rule swap (display:none → icon-only circle on mobile), 2px precision-blue border added

Created

• src/content/devlog/2026-04-26-feedback-fab-mobile-icon-and-blue-outline.md (this entry)

Verification

• Build verify: 20/20 PASS
• All four markup pieces present in compiled HTML: .feedback-fab wrapper, .feedback-fab-icon, .feedback-fab-label, .feedback-fab-arrow
• Compiled CSS includes border: 2px solid var(--color-precision-blue) on the FAB