fix(ui): restore four base rules a CSS sweep deleted, and check for the rest

Operator reported four things looking wrong. Two were the same bug, and it is
not a design drift — it is deleted CSS.

Removing a rule from a scoped stylesheet leaves its modifiers behind. The
selector still exists, so nothing reads as unused, and the element renders with
no base styling at all:

  .btn-workspace      base gone, :hover survived — the Workspace link rendered
                      as raw browser blue, underlined
  .milestone-header   base gone, .clickable and :hover survived. Every child is
                      written for a flex ROW (.ms-name { flex: 1 }, the progress
                      track, .ms-pct), so without the parent they stacked and a
                      one-line milestone became five. That is the "projects
                      section uses space poorly" — a deletion, not a redesign.
  .milestone-group    no rule at all; the card around each milestone
  .ds-header          only its h1 descendant survived

vue-tsc cannot see any of it. A dead style typechecks perfectly.

scripts/check_dangling_styles.py finds the shape: an element whose every static
class has no base rule anywhere, while at least one carries modifier rules. It
reports 11 more. Reported and not gated, because a genuinely bare wrapper is
legitimate — the signal is the count growing. Runs in the lint lane, stdlib
only, and knows no class name or convention (rule #115).

Also from the same report:

- The header pill bar was `position: absolute; left: 50%`, so it did not
  participate in layout: out of room, it OVERLAPPED the brand and the utility
  cluster instead of pushing them. A sixth link reached that at ~1270px, an
  ordinary window. Now `1fr auto 1fr` — a 1fr track has an auto minimum, so
  neither side can be squeezed under its content and the two stay equal, which
  is what keeps the bar centred in the viewport rather than in the leftover
  space. Overflow becomes the header growing, not two things sharing pixels.

- The token preview put its checkerboard on the whole specimen stage, so every
  swatch sat in a frame of checks and the pattern read as the loudest thing on
  the page. The checks now sit UNDER the colour as a second background layer:
  an opaque value hides them, a 15% tint shows exactly as much as it should.
  Text-bearing specimens lose the box entirely, and name/value/purpose are one
  line each with the full text on hover — they wrapped freely before, so a card
  was two lines tall or five depending on how long its color-mix() happened to
  be, and the grid had no rhythm.

- .btn-cta joins the shared button family: the gradient-and-glow brand moment
  the system carries tokens for, which had been living in one view's scoped
  block. That is what made it deletable. The header actions are now one size
  and one family instead of four sizes and two.

- The shared button shape gained inline-flex + gap, so a button carrying an
  icon centres it without each caller rebuilding the row.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs

frontend/src/components/AppHeader.vue

@@ -128,16 +128,31 @@ router.afterEach(() => {
   border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
   position: relative;
 }
+/* Three tracks, not a flex row with an absolutely-centred overlay.
+ *
+ * The pill bar used to be `position: absolute; left: 50%`, which meant it did
+ * not participate in layout: when the header ran out of room it OVERLAPPED the
+ * brand and the utility cluster rather than pushing them, and nothing wrapped
+ * or scrolled to signal it. A sixth link reached that point at ~1270px, which
+ * is an ordinary window on any monitor.
+ *
+ * `1fr auto 1fr` fixes it structurally. A `1fr` track has an AUTO minimum, so
+ * neither side can be squeezed below its content, and the two side tracks stay
+ * equal to each other — which is what keeps the bar centred in the viewport
+ * rather than merely centred in the leftover space. Overflow becomes the
+ * header growing, not two things sharing pixels. */
 .nav {
   padding: 0.6rem 1.5rem;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.75rem;
   position: relative;
 }
 
 /* Left — brand */
 .nav-brand {
+  justify-self: start;
   display: flex;
   align-items: center;
   gap: 0.45rem;
@@ -155,9 +170,7 @@ router.afterEach(() => {
 
 /* Center — pill bar */
 .nav-center {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  justify-self: center;
   display: flex;
   align-items: center;
 }
@@ -172,10 +185,12 @@ router.afterEach(() => {
 
 /* Right */
 .nav-right {
+  justify-self: end;
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
+  min-width: 0;
 }
 
 .nav-link {
@@ -268,6 +283,12 @@ router.afterEach(() => {
   font-size: 0.85rem;
   color: var(--color-text-secondary);
   font-weight: 500;
+  /* The widest thing on the right and the only one that can give: a long
+     username shouldn't be what decides where the nav bar sits. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 12ch;
 }
 .admin-badge {
   font-size: 0.65rem;
@@ -342,13 +363,12 @@ router.afterEach(() => {
   margin-top: 0.25rem;
 }
 
-/* The pill bar is absolutely centred, so when the header runs out of room it
-   OVERLAPS the brand and the utility cluster rather than pushing them — nothing
-   wraps, it just collides. Six primary links reach that point sooner than five
-   did, so reclaim the width here instead of leaving one out of the bar.
-   The wordmark goes first: the logo beside it says the same thing and is still
-   the link home. */
-@media (max-width: 1150px) {
+/* The grid above means running out of room can no longer cause a collision —
+   but it can still make the header wider than the window, and a horizontally
+   scrolling header is its own defect. So shed width before that happens. The
+   wordmark goes first: the logo beside it says the same thing and is still the
+   link home. */
+@media (max-width: 1280px) {
   .brand-text {
     display: none;
   }