.forgejo/workflows/ci.yml

@@ -178,6 +178,15 @@ jobs:
       - name: Design token check
         run: python3 scripts/check_design_tokens.py --report-literals
 
+      # Dangling styles: an element whose classes have only modifier rules and
+      # no base — a deleted CSS rule that left its `:hover` behind. Two shipped
+      # this way (a link rendering as raw browser blue, a flex row whose parent
+      # was gone so every child stacked). Neither is visible to vue-tsc; a dead
+      # style typechecks perfectly. Reported, not gated — a bare wrapper is
+      # legitimate, so the signal is the count growing.
+      - name: Dangling style check
+        run: python3 scripts/check_dangling_styles.py
+
   test:
     name: Python tests
     if: github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')

frontend/src/assets/components.css

@@ -36,7 +36,8 @@
 .btn-secondary,
 .btn-ghost,
 .btn-danger,
-.btn-danger-outline {
+.btn-danger-outline,
+.btn-cta {
   padding: var(--fs-space-2) var(--fs-space-4);   /* 8px 16px */
   border: none;
   border-radius: var(--fs-radius-md);             /* 8px — the system's button radius */
@@ -46,6 +47,14 @@
   line-height: var(--fs-leading-body);
   white-space: nowrap;
   cursor: pointer;
+  /* So a button carrying an icon centres it against the label without each
+     caller re-inventing the flex row — the shape they all reached for
+     separately, and the reason icon buttons sat a pixel or two off. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fs-space-2);
+  text-decoration: none;
   transition: background var(--fs-dur-fast) var(--fs-ease),
               border-color var(--fs-dur-fast) var(--fs-ease),
               color var(--fs-dur-fast) var(--fs-ease);
@@ -58,7 +67,8 @@
 .btn-secondary:disabled,
 .btn-ghost:disabled,
 .btn-danger:disabled,
-.btn-danger-outline:disabled {
+.btn-danger-outline:disabled,
+.btn-cta:disabled {
   opacity: var(--fs-disabled-opacity);
   cursor: not-allowed;
 }
@@ -67,7 +77,8 @@
 .btn-secondary:focus-visible,
 .btn-ghost:focus-visible,
 .btn-danger:focus-visible,
-.btn-danger-outline:focus-visible {
+.btn-danger-outline:focus-visible,
+.btn-cta:focus-visible {
   outline: none;
   box-shadow: var(--fs-focus-ring);
 }
@@ -150,6 +161,25 @@
   color: var(--fs-text-on-action);
 }
 
+/* The one place the accent is allowed on a button: a deliberate brand moment,
+ * never an ordinary action. The system carries `--fs-gradient-cta` and
+ * `--fs-glow-cta` for exactly this and nothing else was using them.
+ *
+ * It exists because ProjectView's Workspace link WAS this button, defined in a
+ * scoped block that the migration deleted — leaving a `:hover` rule with no
+ * base and a link that rendered as raw browser blue. A variant living in one
+ * view is a variant waiting to be deleted by someone tidying another; this is
+ * the shared home so the next sweep can't strand it. */
+.btn-cta {
+  background: var(--fs-gradient-cta);
+  color: var(--fs-text-on-action);
+  box-shadow: var(--fs-glow-cta);
+  text-decoration: none;
+}
+.btn-cta:not(:disabled):hover {
+  box-shadow: var(--fs-glow-cta-hover);
+}
+
 /* --- size modifiers ------------------------------------------------------
  *
  * THREE sizes, because the app genuinely has three. Measured across the ~100
@@ -184,7 +214,7 @@
 /* Full width, for a form's single submitting action — the auth screens. Width
  * is orthogonal to size, so it composes: `btn-primary btn-block`. */
 .btn-block {
-  display: block;
+  display: flex;   /* not `block` — the shared shape centres with flex */
   width: 100%;
   padding: var(--fs-space-3) var(--fs-space-4);   /* 12px 16px — a touch taller,
                                                      because a full-width button

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;
   }

frontend/src/components/TokenPreview.vue

@@ -133,12 +133,13 @@ function ruleWidth(value: string): string {
         <li v-for="s in specimens" :key="s.name" class="tp-item">
           <div
             class="tp-specimen"
+            :class="`is-${s.shape}`"
             :title="s.substituted ? `${s.declared} → ${s.rendered}` : s.declared"
           >
             <span
               v-if="s.shape === 'colour'"
               class="tp-swatch"
-              :style="{ background: s.rendered }"
+              :style="{ '--tp-fill': s.rendered }"
             />
             <span
               v-else-if="s.shape === 'surface'"
@@ -149,6 +150,7 @@ function ruleWidth(value: string): string {
             />
             <span v-else-if="s.shape === 'length'" class="tp-rule-wrap">
               <span class="tp-rule" :style="{ width: ruleWidth(s.rendered) }" />
+              <span class="tp-rule-label">{{ s.rendered }}</span>
             </span>
             <span
               v-else-if="s.shape === 'font'"
@@ -160,8 +162,8 @@ function ruleWidth(value: string): string {
           </div>
 
           <code class="tp-name">{{ s.name }}</code>
-          <span class="tp-value">{{ s.declared || "—" }}</span>
-          <span v-if="s.purpose" class="tp-purpose">{{ s.purpose }}</span>
+          <span class="tp-value" :title="s.declared">{{ s.declared || "—" }}</span>
+          <span v-if="s.purpose" class="tp-purpose" :title="s.purpose">{{ s.purpose }}</span>
         </li>
       </ul>
     </div>
@@ -199,13 +201,16 @@ function ruleWidth(value: string): string {
   color: var(--color-text-muted);
 }
 
-.tp-group { margin-bottom: var(--fs-space-5); }
+.tp-group { margin-bottom: var(--fs-space-6); }
 
 .tp-group-heading {
-  text-transform: capitalize;
-  font-size: var(--fs-size-label);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--fs-space-2);
+  text-transform: uppercase;
+  letter-spacing: var(--fs-tracking-tiny);
+  font-size: var(--fs-size-tiny);
+  color: var(--color-text-muted);
+  margin: 0 0 var(--fs-space-3);
+  padding-bottom: var(--fs-space-2);
+  border-bottom: var(--fs-border);
 }
 
 .tp-grid {
@@ -213,8 +218,8 @@ function ruleWidth(value: string): string {
   padding: 0;
   margin: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  gap: var(--fs-space-3);
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: var(--fs-space-4) var(--fs-space-3);
 }
 
 .tp-item {
@@ -224,44 +229,78 @@ function ruleWidth(value: string): string {
   gap: 0.15rem;
 }
 
-/* A fixed-height stage so a 40px rule and a 2px one still line up in a grid. */
+/* A fixed-height stage so a 40px rule and a 2px one still line up in a grid.
+ *
+ * The stage itself is plain. An earlier version put the checkerboard here, so
+ * every specimen — including opaque colours and plain text — sat inside a
+ * frame of checks, and the pattern read as the loudest thing on the page. The
+ * checks belong to the ONE case that needs them: a colour that might be
+ * translucent. */
 .tp-specimen {
-  height: 2.75rem;
+  height: 2.5rem;
   display: flex;
   align-items: center;
-  border: 1px solid var(--color-border);
   border-radius: var(--fs-radius-sm);
-  padding: 0 var(--fs-space-2);
+  padding: var(--fs-space-1);
   overflow: hidden;
-  /* Checks show through anything translucent — a 15% tint over a solid card
-     would otherwise look opaque and read as the wrong colour. */
-  background:
-    repeating-conic-gradient(var(--color-surface) 0% 25%, var(--color-bg) 0% 50%)
-    0 0 / 12px 12px;
+  background: var(--color-bg-secondary);
+}
+
+/* Text-bearing specimens get no box at all — a border around a value is a
+   frame around nothing, which is most of what made the grid feel busy. */
+.tp-specimen.is-plain,
+.tp-specimen.is-length,
+.tp-specimen.is-font {
+  background: none;
+  padding: 0 var(--fs-space-1);
+}
+
+/* Checks UNDER the colour, not around it: an opaque value hides them
+   completely, and a 15% tint shows exactly as much of them as it should.
+   Layering the fill as a gradient is what lets one element do both. */
+.tp-swatch {
+  width: 100%;
+  height: 100%;
+  border-radius: calc(var(--fs-radius-sm) - 2px);
+  background-image:
+    linear-gradient(var(--tp-fill), var(--tp-fill)),
+    repeating-conic-gradient(
+      var(--color-border) 0% 25%,
+      var(--color-bg-secondary) 0% 50%
+    );
+  background-size: auto, 10px 10px;
 }
 
-.tp-swatch,
 .tp-surface {
   width: 100%;
-  height: 1.75rem;
-  border-radius: calc(var(--fs-radius-sm) - 1px);
+  height: 100%;
+  border-radius: calc(var(--fs-radius-sm) - 2px);
+  background: var(--color-bg-card);
 }
 
-.tp-surface { background: var(--color-surface); }
-
 .tp-rule-wrap {
   width: 100%;
   display: flex;
   align-items: center;
+  gap: var(--fs-space-2);
+  min-width: 0;
 }
 
 .tp-rule {
-  height: 0.5rem;
+  height: 0.4rem;
   min-width: 1px;
+  flex: none;
   background: var(--color-primary-solid);
   border-radius: 999px;
 }
 
+.tp-rule-label {
+  font-family: var(--fs-font-mono);
+  font-size: var(--fs-size-tiny);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
 .tp-font {
   font-size: 1.4rem;
   color: var(--color-text);
@@ -283,16 +322,34 @@ function ruleWidth(value: string): string {
   font-style: italic;
 }
 
+/* One line each, with the full text on hover.
+ *
+ * These wrapped freely at first, so a card was two lines tall or five depending
+ * on how long its `color-mix()` happened to be, and the grid lost any rhythm —
+ * which is most of what "messy" was. A derived value is not something anyone
+ * reads character by character in a gallery; it is something you check the
+ * shape of and open if it matters. */
+.tp-name,
+.tp-value,
+.tp-purpose {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tp-name {
   font-size: var(--fs-size-body-sm);
   color: var(--color-text);
-  word-break: break-all;
 }
 
-.tp-value,
+.tp-value {
+  font-family: var(--fs-font-mono);
+  font-size: var(--fs-size-tiny);
+  color: var(--color-text-secondary);
+}
+
 .tp-purpose {
   font-size: var(--fs-size-tiny);
   color: var(--color-text-muted);
-  word-break: break-word;
 }
 </style>

frontend/src/views/DesignSystemsView.vue

@@ -1102,6 +1102,12 @@ function isSelfContainedColour(value: string): boolean {
   padding: 1.5rem 1rem 4rem;
 }
 
+/* Restored with the same sweep that took `.milestone-header` — only the `h1`
+   descendant rule survived, so the header had no spacing of its own. */
+.ds-header {
+  margin-bottom: 2rem;
+}
+
 .ds-header h1 {
   margin: 0 0 0.5rem;
   font-size: 1.75rem;

frontend/src/views/ProjectView.vue

@@ -446,27 +446,27 @@ async function confirmDelete() {
             @keyup.enter="confirmStartPlanning"
           />
           <button
-            class="btn-workspace"
+            class="btn-primary btn-compact"
             :disabled="!planTitle.trim() || planningBusy"
             @click="confirmStartPlanning"
           >
             Create plan
           </button>
-          <button class="btn-secondary btn-compact" @click="showStartPlanning = false; planTitle = ''">Cancel</button>
+          <button class="btn-ghost btn-compact" @click="showStartPlanning = false; planTitle = ''">Cancel</button>
         </template>
         <button
           v-else-if="project"
-          class="btn-workspace"
+          class="btn-ghost btn-compact"
           @click="showStartPlanning = true"
         >
           Start planning
         </button>
-        <router-link v-if="project && !showStartPlanning" :to="`/workspace/${project.id}`" class="btn-workspace">
+        <router-link v-if="project && !showStartPlanning" :to="`/workspace/${project.id}`" class="btn-cta btn-compact">
           <LayoutGrid :size="16" />
           Workspace
         </router-link>
         <button v-if="project && !showStartPlanning" class="btn-secondary btn-compact" @click="showShare = true">Share</button>
-        <button v-if="project && !showStartPlanning" class="btn-danger-outline" @click="showDeleteConfirm = true">Delete</button>
+        <button v-if="project && !showStartPlanning" class="btn-danger-outline btn-compact" @click="showDeleteConfirm = true">Delete</button>
       </div>
     </div>
 
@@ -870,9 +870,6 @@ async function confirmDelete() {
   min-width: 200px;
 }
 
-.btn-workspace:hover { box-shadow: var(--glow-cta-hover); opacity: 0.95; color: var(--fs-text-on-action); }
-
-/* Share: Bronze action-secondary — alternate path */
 .project-title-input {
   flex: 1;
   font-size: 1.75rem;
@@ -1067,6 +1064,29 @@ async function confirmDelete() {
 }
 .milestone-title-input:focus { outline: none; border-color: var(--color-primary); }
 /* Milestone confirm: Moss action-primary; Cancel: Bronze action-secondary */
+/* RESTORED. Both of these lost their base rule to a CSS sweep and left only
+   modifiers behind — `.milestone-header.clickable`, `.milestone-header:hover`.
+   Every child here (`.ms-chevron`, `.ms-name { flex: 1 }`, the progress track,
+   `.ms-pct`) is written for a flex ROW, so without the parent they stacked
+   vertically and each milestone grew to five lines of mostly nothing. That is
+   the "uses space poorly" the operator saw, and it was a deletion rather than a
+   design change. A dangling `:hover` is the tell, and it is now checked for. */
+.milestone-group {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.milestone-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.85rem;
+  background: var(--color-bg-secondary);
+}
+
 .milestone-header.clickable { cursor: pointer; }
 .milestone-header.clickable:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-secondary)); }
 

scripts/check_dangling_styles.py

@@ -0,0 +1,156 @@
+#!/usr/bin/env python3
+"""Find elements whose classes have no base rule — the dangling-selector bug.
+
+THE FAILURE THIS CATCHES
+
+Deleting a CSS rule from a scoped stylesheet is not the local edit it looks
+like. Three ways it goes wrong, all of them silent:
+
+  1. A rule is deleted and its `:hover` / modifier survives. The selector still
+     exists, so nothing reads as unused, but the element renders with no base
+     styling at all. `.btn-workspace:hover` outlived `.btn-workspace` and a
+     router-link rendered as raw browser blue for days.
+
+  2. The parent's layout rule is deleted while the children keep theirs.
+     `.milestone-header` was a flex row; its children still declare `flex: 1`
+     and `flex-shrink: 0`. Without the parent they stack vertically, and a
+     milestone that was one line becomes five. Nothing errors — the page just
+     wastes space, which reads as a design decision.
+
+  3. A rule is removed from a comma-separated group, leaving `.a,` dangling in
+     front of the next rule and swallowing it. That one at least has a
+     brace-balance tell; these two do not.
+
+None of it is visible to `vue-tsc`, which is the frontend's entire check. A
+dead style typechecks perfectly.
+
+WHAT IT REPORTS
+
+An element whose every static class is styled NOWHERE as a base rule, while at
+least one of them appears in the file's CSS. That conjunction is the signal: a
+class nobody styles is ordinary (a hook for a test, a semantic label), and a
+class with only modifier rules is a deletion that went half-way.
+
+Descendant selectors count as a base — `.panel .row {}` styles `.row` — because
+from the element's side there is no difference. Only the LAST compound of a
+selector is what it styles.
+
+REPORT, NOT FAIL. Bare wrappers with no styling of their own are legitimate,
+so this cannot be a gate without a suppression mechanism nobody would maintain.
+A count that grows is the signal to look.
+
+INSTANCE-AGNOSTIC (rule #115). Nothing here knows a class name, a component, or
+a convention; point it at any Vue tree.
+"""
+from __future__ import annotations
+
+import argparse
+import pathlib
+import re
+import sys
+
+STYLE_BLOCK = re.compile(r"<style[^>]*>(.*?)</style>", re.S)
+CSS_COMMENT = re.compile(r"/\*.*?\*/", re.S)
+# `class="a b"` only — never `:class="[...]"`, whose value is an expression.
+# The negative lookbehind is the whole point: a bound class list mentions names
+# that a static parse would misread as the element's only classes.
+STATIC_CLASS = re.compile(r'(?<![:\w-])class="([^"{}\[\]]*)"')
+SELECTOR = re.compile(r"([^{}]+)\{")
+CLASS_TOKEN = re.compile(r"\.([A-Za-z][\w-]*)")
+BARE_CLASS = re.compile(r"\.([\w-]+)\Z")
+
+
+def shared_classes(sheets: list[pathlib.Path]) -> set[str]:
+    """Class names any global stylesheet defines — a base rule from elsewhere."""
+    names: set[str] = set()
+    for sheet in sheets:
+        if sheet.exists():
+            names |= set(CLASS_TOKEN.findall(sheet.read_text()))
+    return names
+
+
+def based_classes(css: str) -> set[str]:
+    """Classes this stylesheet gives a base rule to.
+
+    The last compound of a selector is what the rule styles: in
+    `.panel .row:hover` that is `.row:hover`, a modifier — but in `.panel .row`
+    it is `.row`, a base. So a selector qualifies only when its final compound
+    is a lone class with nothing appended.
+    """
+    out: set[str] = set()
+    for selector in SELECTOR.findall(css):
+        for part in selector.split(","):
+            part = part.strip()
+            if not part or part.startswith("@"):
+                continue
+            last = re.split(r"[\s>+~]+", part)[-1]
+            match = BARE_CLASS.fullmatch(last)
+            if match:
+                out.add(match.group(1))
+    return out
+
+
+def scan(path: pathlib.Path, shared: set[str]) -> list[tuple[str, list[str]]]:
+    source = path.read_text()
+    template = source.split("<style")[0]
+    css = "\n".join(CSS_COMMENT.sub("", block) for block in STYLE_BLOCK.findall(source))
+    if not css.strip():
+        return []
+
+    based = based_classes(css)
+    mentioned = set(CLASS_TOKEN.findall(css))
+
+    findings: list[tuple[str, list[str]]] = []
+    for attr in sorted(set(STATIC_CLASS.findall(template))):
+        names = [n for n in attr.split() if re.fullmatch(r"[A-Za-z][\w-]*", n)]
+        if not names:
+            continue
+        if any(n in based or n in shared for n in names):
+            continue
+        dangling = [n for n in names if n in mentioned]
+        if dangling:
+            findings.append((attr, dangling))
+    return findings
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("--root", default="frontend/src", help="tree of .vue files")
+    parser.add_argument(
+        "--shared",
+        action="append",
+        default=None,
+        help="global stylesheet whose classes count as a base rule (repeatable)",
+    )
+    args = parser.parse_args()
+
+    root = pathlib.Path(args.root)
+    if not root.exists():
+        print(f"{root}: no such directory", file=sys.stderr)
+        return 2
+
+    sheets = [pathlib.Path(s) for s in (args.shared or [])]
+    if not sheets:
+        sheets = sorted(root.glob("assets/*.css"))
+    shared = shared_classes(sheets)
+
+    total = 0
+    for path in sorted(root.rglob("*.vue")):
+        for attr, dangling in scan(path, shared):
+            total += 1
+            print(f'{path}: class="{attr}" — styled but never based: {", ".join(dangling)}')
+
+    print()
+    if total:
+        print(
+            f"REPORT: {total} element(s) whose classes carry modifier rules but no base "
+            f"rule. Each is either a deleted rule that left its :hover behind, or a "
+            f"deliberately bare wrapper."
+        )
+    else:
+        print("OK — every styled class has a base rule.")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())