great-cto 3.20.0 → 3.22.0

package/board/packages/board/public/index.html

@@ -31,14 +31,29 @@
 <script src="/assets/vendor/purify.min.js"></script>
 <style>
 :root {
+  /* The <meta name="color-scheme"> above is static, so it says "dark" in BOTH
+     themes. Every form control that never set its own `color` then takes the
+     dark scheme's UA defaults — `buttontext` is white — and in the light theme
+     six "Copy re-run" buttons rendered white on white, 1.00:1. The token audit
+     could not see it: no declared pair was wrong; the wrong colour was simply
+     never declared. This property wins over the meta, and the light block
+     below flips it. tests/lib/rendered-contrast.test.mjs reads the pixels. */
+  color-scheme: dark;
   /* Colours that used to be written straight into rules.
      Twenty-nine declarations bypassed the token system, so the contrast audit —
      which reads `:root` — could not see any of them. Values are carried across
      unchanged: this is a rename, not a redesign, and the rendered-layout check
      proves it by comparing the colours the page actually paints. */
-  --on-solid: #fff;           /* text on a solid coloured chip or button */
+  /* Three tokens, because "text on a solid chip" was three different questions
+     wearing one name. --on-solid covered the near-black button (#0f1115), the
+     green accent and the status colours at once, and #fff is right for exactly
+     one of them: white on the accent measures 1.87:1 on dark and 3.82:1 on
+     light. Naming the bed each one sits on is what makes the value checkable. */
+  --on-solid:  #fff;          /* on --bg-solid (#0f1115) — 18.90:1 */
+  --on-status: #0d1a14;       /* on --status-* — bright on dark; the light theme flips it */
   --on-warm: #000;            /* text on amber, where white fails contrast */
-  --on-accent: #04140d;       /* text on the green accent */
+  --on-accent: #04140d;       /* on --accent: 10.10 dark, 4.95 light. White fails both
+                                 (1.87 / 3.82) — the accent is a mid-green, not a dark bed. */
   --bg-solid: #0f1115;        /* opaque button and tooltip surface */
   --bg-solid-hover: #2a2d33;
   --accent-hover: #00ee8a;
@@ -66,7 +81,12 @@
 
   --text:  #ecf2ee;
   --text2: #8a9a92;
-  --text3: #8b958c;
+  /* FIND-3. The widest step this ladder allows — 4.53 against the lightest
+     surface, where the floor is 4.5. A five-step dark ladder cannot carry
+     three clearly distinct ink steps; the light ground can. Two-and-a-bit
+     steps is what this surface has, and calling it three would be the same
+     defect one layer up. See the commit for the measurements. */
+  --text3: #848f88;
 
 
   /* Focus ring — a separate token from --accent on purpose.
@@ -78,7 +98,6 @@
   --rail-ok-bg: rgba(0, 217, 126, 0.12);
   --rail-fail-bg: rgba(255, 84, 102, 0.12);
   --surface-drawer: #0f1411;
-  --drawer-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
 
   --accent: #00d97e;
   --accent-2: #34e69b;
@@ -89,6 +108,7 @@
   --status-todo: #9ca3af;
   --status-progress: #f59e0b;
   --status-review: #00d97e;
+  --status-review-text: #00d97e;  /* bright on dark: the bed and the ink can be one colour */
   --status-done: #00d97e;
   --status-blocked: #ff5466;
   --status-gate: #a78bfa;
@@ -98,17 +118,25 @@
   --p2-bg: rgba(240, 210, 78, 0.14);  --p2-fg: #fde68a;
   --p3-bg: rgba(255, 255, 255, 0.05); --p3-fg: #9ca3af;
 
-  --serif: "Geist", "Space Grotesk", "Inter", -apple-system, sans-serif;
+  /* Was `--serif`, and there is no serif anywhere in the stack — it is the
+     DISPLAY face, doing display work correctly under a name that promised a
+     contrast this page has never had. greatcto.systems already calls the same
+     stack `--display`; this is that name arriving here. */
+  /* Direction ①: one voice. The display face IS the mono face — rule 4 already
+     said mono means machine-truth, and a board whose every figure is a number
+     you would paste has no second voice to speak in. Weight caps at 500: the
+     vendored axis is 400-500 and hierarchy is size and ink, never bold. */
+  --display: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
   --sans:  "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --mono:  "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
-
-  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30);
-  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 217, 126, 0.06);
   --accent-text: #00d97e;   /* contrast-safe accent for TEXT (bright on dark) */
   --surface-translucent: rgba(17, 22, 26, 0.7);   /* translucent card surface (themable) */
 }
 /* Light theme — same emerald system, AA-contrast on white. Toggle via data-theme. */
 [data-theme="light"] {
+  /* Flip the UA scheme with the tokens, or every unstyled control stays on the
+     dark scheme's defaults (see :root). */
+  color-scheme: light;
   /* Four values that had never been measured.
      The contrast audit read `:root` and nothing else, so this theme — 39 token
      overrides, half the board's surface area — was unchecked for months. When it
@@ -129,17 +157,33 @@
   --border-strong: rgba(0, 0, 0, 0.18);
   --text:  #0d1a14;
   --text2: #56655e;
-  --text3: #55625b;
+  /* Below --text2, which it was not: #55625b measured 6.39 on --bg-card against
+     text2's 6.14 — the quietest step was the louder one, so a caption read with
+     more emphasis than the secondary line above it. Both cleared AA, so no
+     contrast guard could see it; it is a hierarchy defect, not a readability one.
+     #5b6b64 is the quietest this ladder allows: 5.62 on --bg-card and 4.52 on
+     --bg-strong, the hardest surface here. The step is 0.52 where the dark theme
+     gets 0.74 — --bg-strong is what runs out first, the same way the dark
+     theme's five surfaces limit its own third step. */
+  --text3: #5b6b64;
   --focus-ring: #047857;
   --accent: #009657;
-  --accent-2: #0a7d4d;
+  --accent-2: #097448;   /* 4.06 on the approve tint, floor 4.5 → 4.55 */
   --accent-soft: rgba(0, 217, 126, 0.12);
   --accent-strong: rgba(0, 168, 98, 0.20);
-  --accent-text: #097648;
+  --accent-text: #097547;
+  /* The light theme's status colours are dark (#0a7d4d, #b45309, #c43030),
+     so the ink that reads on the dark theme's bright ones fails here: 3.45,
+     3.56, 3.24. White gives 5.18, 5.02, 5.51. */
+  --on-status: #fff;
   --status-backlog: #6b7280;
   --status-todo: #6b7280;
   --status-progress: #b45309;
   --status-review: #0a7d4d;
+  /* Same split as --accent / --accent-text: this colour is a BED for tier
+     badges and a dot, and INK for approve buttons and budget chips. As ink it
+     measures 4.06 on the .12 approve tint it most often sits on. */
+  --status-review-text: #097448;
   --status-done: #0a7d4d;
   --status-blocked: #c43030;
   --status-gate: #7c3aed;
@@ -219,6 +263,10 @@ body {
 button, input, select, textarea {
   font-family: inherit;
   font-size: var(--fs-body);
+  /* Controls do not inherit `color` by default; they take the UA scheme's.
+     Belt to the color-scheme braces above: authored tokens govern text here
+     regardless of what scheme the browser thinks it is in. */
+  color: inherit;
 }
 button { cursor: pointer; }
 
@@ -290,7 +338,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin: 0 0 12px; padding: 10px 14px;
   background: rgba(180, 83, 9, 0.10);
   border: 1px solid var(--status-progress);
-  border-radius: 8px;
+  border-radius: 0;
   font-size: var(--fs-body); color: var(--text);
 }
 .stale-board code { font-family: var(--mono); font-size: var(--fs-small); }
@@ -301,11 +349,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    board spends its time refusing to render. */
 .budget-chip {
   font-family: var(--mono); font-size: var(--fs-eyebrow);
-  padding: 1px 6px; border-radius: 3px;
+  padding: 1px 6px; border-radius: 0;
   border: 1px solid var(--border);
   white-space: nowrap;
 }
-.budget-chip.within     { color: var(--status-review); border-color: rgba(22, 163, 74, 0.35); }
+.budget-chip.within     { color: var(--status-review-text); border-color: rgba(22, 163, 74, 0.35); }
 .budget-chip.exceeded   { color: var(--status-blocked); border-color: rgba(220, 38, 38, 0.35); background: var(--p0-bg); font-weight: 600; }
 .budget-chip.unmeasured { color: var(--status-progress); border-color: rgba(180, 83, 9, 0.35); cursor: help; }
 
@@ -325,7 +373,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ab-btn {
   font-family: inherit; font-size: var(--fs-caption);
   min-height: 24px; padding: 0 8px;
-  border: 1px solid var(--border); border-radius: 5px;
+  border: 1px solid var(--border); border-radius: 0;
   background: var(--bg-card); color: var(--text2);
 }
 .ab-btn:hover { border-color: var(--focus-ring); color: var(--text); }
@@ -335,7 +383,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .budget-line {
   margin: -18px 0 24px; padding: 8px 12px;
-  border-radius: 8px; font-size: var(--fs-small);
+  border-radius: 0; font-size: var(--fs-small);
   border: 1px solid var(--border);
 }
 .budget-line.exceeded   { color: var(--status-blocked); border-color: var(--status-blocked); background: var(--p0-bg); font-weight: 500; }
@@ -350,6 +398,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   -webkit-backdrop-filter: blur(20px);
   border-right: 1px solid var(--border);
   display: flex; flex-direction: column;
+  border: 1px solid var(--border);
 }
 /* Below this width the fixed 240px sidebar left 135px of workspace on a 375px
    screen — narrower than a single kanban column (264px) — so every visit from a
@@ -371,7 +420,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: none;
   align-items: center; justify-content: center;
   width: 40px; height: 40px; flex-shrink: 0;
-  border: 1px solid var(--border); border-radius: 8px;
+  border: 1px solid var(--border); border-radius: 0;
   background: var(--bg-card); color: var(--text2);
 }
 .menu-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@@ -387,14 +436,20 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .sidebar-brand .brand-mark {
   width: 24px; height: 24px;
   background: var(--bg-page);
-  border-radius: 5px;
+  border-radius: 0;
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
   border: 1px solid var(--border-strong);
 }
 .sidebar-brand .brand-mark svg { width: 22px; height: 22px; }
 .sidebar-brand .brand-name {
-  font-family: var(--serif); font-weight: 600;
+  /* 500, not 600: --display is the mono stack, and Geist Mono's weight axis
+     ends at 500. Asking for 600 gets a SYNTHETIC bold — the browser strokes
+     around the glyph — and 600 and 700 render identically because of it
+     (measured: 1926 ink pixels for both, against a smooth 1473/1598 for
+     400/500). The brand already outranks its neighbours by size, 16px against
+     12-14, which is the hierarchy this direction asks for. */
+  font-family: var(--display); font-weight: 500;
   font-size: var(--fs-title-s); letter-spacing: -0.01em;
   color: var(--text);
 }
@@ -407,7 +462,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   user-select: none;
 }
 .proj-switch:hover { background: var(--bg-muted); }
-.proj-switch .star { color: var(--accent); font-size: 16px; }
+.proj-switch .star { color: var(--accent-text); font-size: 16px; }
 .proj-switch .name { font-weight: 600; font-size: var(--fs-base); }
 .proj-switch .sw-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; }
 .sw-ancestry[hidden] { display: none; }
@@ -430,8 +485,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   top: calc(100% - 4px); left: 8px; right: 8px;
   background: var(--bg-card);
   border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.10);
+  border-radius: 0;
+  box-shadow: none;
   padding: 4px;
   z-index: 100;
   display: none;
@@ -452,13 +507,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .proj-item {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 10px;
-  border-radius: 5px;
+  border-radius: 0;
   cursor: pointer;
   font-size: var(--fs-body);
 }
 .proj-item:hover { background: var(--bg-muted); }
 .proj-item.active { background: var(--bg-strong); font-weight: 500; }
-.proj-item .star { color: var(--accent); font-size: var(--fs-base); }
+.proj-item .star { color: var(--accent-text); font-size: var(--fs-base); }
 .proj-icon, .proj-switch .proj-icon, .crumbs .proj-icon {
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0;
@@ -475,7 +530,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .proj-item .check {
   width: 14px; height: 14px;
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .proj-item:not(.active) .check { display: none; }
 .proj-menu-empty {
@@ -489,7 +544,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .nav-item {
   display: flex; align-items: center; gap: 10px;
   height: 32px; padding: 0 10px;
-  border-radius: 6px;
+  border-radius: 0;
   font-size: var(--fs-body);
   color: var(--text);
   cursor: pointer;
@@ -504,10 +559,10 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   left: -8px; top: 6px; bottom: 6px;
   width: 3px;
   background: var(--accent);
-  border-radius: 0 2px 2px 0;
+  border-radius: 0;
 }
 .nav-item .icon { width: 16px; height: 16px; color: var(--text2); flex-shrink: 0; }
-.nav-item.active .icon { color: var(--accent); }
+.nav-item.active .icon { color: var(--accent-text); }
 .nav-item .count { margin-left: auto; font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
 .nav-divider { height: 1px; background: var(--border); margin: 12px 8px; }
 
@@ -538,7 +593,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   font-size: var(--fs-body);
 }
 .crumbs { display: flex; align-items: center; gap: 8px; color: var(--text2); }
-.crumbs .star { color: var(--accent); }
+.crumbs .star { color: var(--accent-text); }
 .crumbs .sep { color: var(--text3); }
 .crumbs .here { color: var(--text); font-weight: 500; }
 
@@ -546,7 +601,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: flex; align-items: center; gap: 6px;
   background: var(--bg-muted);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 0;
   padding: 4px 10px;
   width: 280px;
   margin: 0 16px;
@@ -564,13 +619,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   font-family: var(--mono); font-size: var(--fs-eyebrow);
   color: var(--text3);
   background: var(--bg-strong);
-  border-radius: 3px; padding: 1px 5px;
+  border-radius: 0; padding: 1px 5px;
 }
 
 .topbar-actions { display: flex; align-items: center; gap: 6px; }
 .btn-bell {
   position: relative; background: transparent;
-  border: 1px solid var(--border); border-radius: 8px;
+  border: 1px solid var(--border); border-radius: 0;
   padding: 6px 8px; cursor: pointer; color: var(--text2);
   display: flex; align-items: center; transition: border-color .15s, color .15s;
 }
@@ -579,7 +634,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   position: absolute; top: -5px; right: -5px;
   background: var(--accent); color: var(--on-accent);
   font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
-  min-width: 16px; height: 16px; border-radius: 8px;
+  min-width: 16px; height: 16px; border-radius: 0;
   display: none; align-items: center; justify-content: center;
   padding: 0 3px;
 }
@@ -587,7 +642,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .tab-row { display: flex; align-items: center; gap: 4px; margin-right: 12px; }
 .tab-btn {
   background: transparent; border: none;
-  padding: 6px 12px; border-radius: 6px;
+  padding: 6px 12px; border-radius: 0;
   font-size: var(--fs-body); color: var(--text2);
 }
 .tab-btn:hover { background: var(--bg-muted); color: var(--text); }
@@ -599,7 +654,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .icon-btn {
   background: transparent; border: 1px solid transparent;
   width: 30px; height: 30px;
-  border-radius: 6px;
+  border-radius: 0;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--text2);
 }
@@ -637,7 +692,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 10px;
   display: flex; flex-direction: column; gap: 8px;
   max-height: 100%;
@@ -666,7 +721,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .card {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 12px;
   cursor: pointer;
   transition: box-shadow 0.15s, transform 0.15s;
@@ -686,7 +741,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
+.card:hover { box-shadow: none; transform: translateY(-1px); }
 .card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .card .id {
   font-family: var(--mono); font-size: var(--fs-eyebrow);
@@ -748,7 +803,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   height: 24px;
   border: 1px solid var(--border);
-  border-radius: 5px;
+  border-radius: 0;
   font-family: inherit; font-size: var(--fs-caption); font-weight: 500;
   cursor: pointer;
   background: var(--bg-card);
@@ -761,26 +816,26 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    makes a long gate list scannable is left exactly as it is. 44px is the iOS
    minimum; Android asks for 48dp, and the gap does the rest. */
 
-.gate-approve { color: var(--status-review); border-color: rgba(22, 163, 74, 0.35); }
+.gate-approve { color: var(--status-review-text); border-color: rgba(22, 163, 74, 0.35); }
 .gate-approve:hover { background: rgba(22, 163, 74, 0.08); border-color: var(--status-review); }
 /* Agent runner (launch control) */
-#agent-panel { position: fixed; right: 16px; bottom: 16px; width: min(560px, 94vw); max-height: 70vh; display: none; flex-direction: column; background: var(--bg-card, #11161a); border: 1px solid var(--border, #1f2a26); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); z-index: 60; overflow: hidden; }
+#agent-panel { position: fixed; right: 16px; bottom: 16px; width: min(560px, 94vw); max-height: 70vh; display: none; flex-direction: column; background: var(--bg-card, #11161a); border: 1px solid var(--border, #1f2a26); border-radius: 0; box-shadow: none; z-index: 60; overflow: hidden; }
 #agent-panel.open { display: flex; }
 #agent-panel header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border, #1f2a26); background: transparent; }
 #agent-panel header b { font-size: var(--fs-body); }
 #agent-panel .ap-x { margin-left: auto; cursor: pointer; border: 0; background: none; color: var(--text3); font-size: 16px; }
 #agent-log { flex: 1; overflow: auto; padding: 10px 14px; font: 12px/1.55 ui-monospace, Menlo, monospace; }
 #agent-log .al { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
-#agent-log .al.tool { color: var(--status-review); } #agent-log .al.system { color: var(--text3); } #agent-log .al.error { color: var(--status-blocked, #ff5a5a); } #agent-log .al.done { color: var(--text3); font-weight: 600; }
+#agent-log .al.tool { color: var(--status-review-text); } #agent-log .al.system { color: var(--text3); } #agent-log .al.error { color: var(--status-blocked, #ff5a5a); } #agent-log .al.done { color: var(--text3); font-weight: 600; }
 #agent-panel .ap-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border, #1f2a26); }
-#agent-panel input { flex: 1; background: var(--bg-muted); color: var(--text, #ecf2ee); border: 1px solid var(--border, #1f2a26); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: var(--fs-body); }
+#agent-panel input { flex: 1; background: var(--bg-muted); color: var(--text, #ecf2ee); border: 1px solid var(--border, #1f2a26); border-radius: 0; padding: 7px 10px; font: inherit; font-size: var(--fs-body); }
 #agent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
 #agent-dot.live { background: var(--status-review); animation: apulse 1.2s infinite; }
 @keyframes apulse { 0%,100%{opacity:1} 50%{opacity:.4} }
 .gate-reject { color: var(--status-blocked); border-color: rgba(220, 38, 38, 0.30); }
 .gate-reject:hover { background: rgba(220, 38, 38, 0.06); border-color: var(--status-blocked); }
 .chip-agent {
-  background: var(--accent-soft); color: var(--accent);
+  background: var(--accent-soft); color: var(--accent-text);
   font-family: var(--mono);
 }
 
@@ -812,7 +867,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   padding: 10px 12px;
   border: 1px solid #f0b429;
   border-left-width: 3px;
-  border-radius: 6px;
+  border-radius: 0;
   background: rgba(240, 180, 41, 0.08);
   font-size: var(--fs-small);
   line-height: 1.45;
@@ -820,6 +875,21 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .degraded-banner strong { color: var(--text); font-weight: 600; }
 .degraded-banner span { color: var(--text2); font-family: var(--mono, ui-monospace, monospace); word-break: break-word; }
 
+/* Louder than .degraded-banner, and after it, so the shared properties are
+   inherited and only the severity is overridden — at equal specificity the later
+   rule wins, which is the whole reason this sits below rather than above.
+
+   The two banners report different failures and must not look alike: amber says
+   a panel could not be read and is showing empty; red says every panel WAS read,
+   correctly, for a different project. The second is the more dangerous, because
+   nothing else on the screen looks wrong. */
+.project-fallback-banner {
+  border-color: var(--status-blocked);
+  background: var(--rail-fail-bg);
+}
+.project-fallback-banner strong { color: var(--status-blocked); }
+.project-fallback-banner span   { color: var(--text); font-family: var(--sans); }
+
 /* ── Side panel ───────────────────────────────────────────────────────────── */
 .side {
   position: absolute;
@@ -827,7 +897,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   width: 480px;
   background: var(--bg-card);
   border-left: 1px solid var(--border);
-  box-shadow: -12px 0 32px rgba(15, 17, 21, 0.08);
+  box-shadow: none;
   z-index: 10;
   display: flex; flex-direction: column;
   transform: translateX(100%);
@@ -860,14 +930,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .side-id {
   font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
   background: var(--bg-strong); color: var(--text);
-  padding: 4px 8px; border-radius: 4px;
+  padding: 4px 8px; border-radius: 0;
   letter-spacing: 0.04em;
 }
 .side-close {
   margin-left: auto; cursor: pointer;
   width: 28px; height: 28px;
   display: flex; align-items: center; justify-content: center;
-  border-radius: 6px;
+  border-radius: 0;
   color: var(--text3);
 }
 .side-close:hover { background: var(--bg-muted); color: var(--text); }
@@ -897,7 +967,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   font-style: normal;
   background: var(--bg-muted);
   padding: 1px 5px;
-  border-radius: 3px;
+  border-radius: 0;
   font-size: var(--fs-small);
 }
 .side-desc.md { white-space: normal; }
@@ -910,15 +980,15 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .side-desc.md li { margin: 2px 0; }
 .side-desc.md code {
   background: var(--bg-muted); padding: 1px 4px;
-  border-radius: 3px; font-size: var(--fs-small); font-family: ui-monospace, monospace;
+  border-radius: 0; font-size: var(--fs-small); font-family: ui-monospace, monospace;
 }
 .side-desc.md pre.md-pre {
   background: var(--bg-muted); padding: 8px 10px;
-  border-radius: 4px; overflow-x: auto; font-size: var(--fs-small);
+  border-radius: 0; overflow-x: auto; font-size: var(--fs-small);
   margin: 6px 0;
 }
 .side-desc.md pre.md-pre code { background: none; padding: 0; }
-.side-desc.md a { color: var(--accent); text-decoration: none; }
+.side-desc.md a { color: var(--accent-text); text-decoration: none; }
 .side-desc.md a:hover { text-decoration: underline; }
 .side-desc.md strong { color: var(--text); font-weight: 600; }
 .side-id-row { display: inline-flex; align-items: center; gap: 6px; }
@@ -935,20 +1005,21 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .toast {
   background: var(--toast-bg); color: var(--on-solid);
-  padding: 8px 14px; border-radius: 6px;
+  padding: 8px 14px; border-radius: 0;
   font-size: var(--fs-body); min-width: 200px; max-width: 360px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
+  box-shadow: none;
   opacity: 0; transform: translateY(8px);
   transition: opacity 0.2s, transform 0.2s;
   pointer-events: auto;
+  border: 1px solid var(--border-strong);
 }
 .toast.show { opacity: 1; transform: translateY(0); }
 .toast-success { background: var(--toast-ok); border-left: 3px solid #22c55e; }
 .toast-error { background: var(--toast-err); border-left: 3px solid #ef4444; }
 .toast-info { background: var(--toast-info); border-left: 3px solid #3b82f6; }
-.toast code { background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 3px; }
+.toast code { background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 0; }
 .pl-stage { cursor: pointer; transition: background 0.12s; }
-.pl-stage:hover { background: var(--bg-muted); border-radius: 4px; }
+.pl-stage:hover { background: var(--bg-muted); border-radius: 0; }
 .card-selected { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
 #cmdk {
   position: fixed; inset: 0; z-index: 10001;
@@ -961,7 +1032,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   width: min(620px, 92vw); max-height: 62vh;
   display: flex; flex-direction: column;
   background: var(--surface-drawer); border: 1px solid var(--border-strong);
-  border-radius: 12px; box-shadow: var(--drawer-shadow); overflow: hidden;
+  border-radius: 0; box-shadow: none; overflow: hidden;
 }
 #cmdk-input {
   border: 0; border-bottom: 1px solid var(--border);
@@ -971,7 +1042,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 #cmdk-list { overflow-y: auto; padding: 6px; }
 .cmdk-item {
   display: flex; align-items: center; gap: 10px;
-  padding: 9px 10px; border-radius: 7px; cursor: pointer;
+  padding: 9px 10px; border-radius: 0; cursor: pointer;
   min-height: 40px;
 }
 .cmdk-item.on { background: var(--bg-muted); }
@@ -995,8 +1066,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .hk-card {
   position: relative; background: var(--bg-elevated);
   color: var(--text); border: 1px solid var(--border);
-  border-radius: 8px; padding: 20px 24px; min-width: 360px;
-  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
+  border-radius: 0; padding: 20px 24px; min-width: 360px;
+  box-shadow: none;
 }
 .hk-title { font-size: var(--fs-title-s); font-weight: 600; margin-bottom: 12px; }
 .hk-table { border-collapse: collapse; width: 100%; }
@@ -1004,7 +1075,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .hk-table td:first-child { text-align: right; white-space: nowrap; color: var(--text2); }
 .hk-table kbd {
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 3px; padding: 1px 5px; font-size: var(--fs-caption);
+  border-radius: 0; padding: 1px 5px; font-size: var(--fs-caption);
   font-family: ui-monospace, monospace; color: var(--text);
 }
 .hk-foot { margin-top: 12px; font-size: var(--fs-caption); color: var(--text3, #9ca3af); text-align: center; }
@@ -1018,8 +1089,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .rdm-card {
   position: relative; background: var(--bg-elevated);
   color: var(--text); border: 1px solid var(--border);
-  border-radius: 8px; padding: 18px 22px; min-width: 480px; max-width: 720px;
-  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
+  border-radius: 0; padding: 18px 22px; min-width: 480px; max-width: 720px;
+  box-shadow: none;
 }
 .rdm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 .rdm-head .rdm-agent { font-weight: 600; }
@@ -1027,7 +1098,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .rdm-head .rdm-verdict.fail { color: var(--verdict-fail); }
 .rdm-head .rdm-ts { color: var(--text2); font-size: var(--fs-caption); margin-left: auto; }
 .rdm-raw {
-  background: var(--bg-muted); padding: 8px 10px; border-radius: 4px;
+  background: var(--bg-muted); padding: 8px 10px; border-radius: 0;
   font-family: ui-monospace, monospace; font-size: var(--fs-small);
   white-space: pre-wrap; word-break: break-all;
   border: 1px solid var(--border);
@@ -1039,18 +1110,18 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: inline-flex; align-items: center; gap: 4px;
   margin: 2px 4px 2px 0; padding: 4px 8px;
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 4px; font-size: var(--fs-small); cursor: pointer;
+  border-radius: 0; font-size: var(--fs-small); cursor: pointer;
   text-decoration: none; color: var(--text);
   font-family: ui-monospace, monospace;
 }
 .rdm-artefact:hover { background: var(--bg-muted); }
 .rdm-artefact .rdm-art-kind {
-  font-size: var(--fs-eyebrow); padding: 1px 4px; border-radius: 3px;
+  font-size: var(--fs-eyebrow); padding: 1px 4px; border-radius: 0;
   background: var(--accent-soft); color: var(--accent-text);
 }
 .rdm-foot { margin-top: 12px; font-size: var(--fs-caption); color: var(--text3, #9ca3af); }
 .resume-item { cursor: pointer; }
-.resume-item:hover { background: var(--bg-muted); border-radius: 4px; }
+.resume-item:hover { background: var(--bg-muted); border-radius: 0; }
 
 /* ── New issue modal ──────────────────────────────────────────────────── */
 #new-issue-modal {
@@ -1064,9 +1135,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ni-card {
   position: relative; background: var(--bg-elevated, #161a1f);
   color: var(--text); border: 1px solid var(--border-strong, #2a2d33);
-  border-radius: 10px; width: 480px; max-width: calc(100vw - 32px);
+  border-radius: 0; width: 480px; max-width: calc(100vw - 32px);
   max-height: calc(100vh - 64px); overflow: auto;
-  box-shadow: 0 24px 48px rgba(0,0,0,0.6);
+  box-shadow: none;
   animation: ni-pop 140ms ease-out;
 }
 @keyframes ni-pop {
@@ -1080,7 +1151,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ni-header h3 { font-size: var(--fs-title-s); font-weight: 600; margin: 0; }
 .ni-close {
   background: transparent; border: 0; color: var(--text3);
-  cursor: pointer; padding: 4px; display: flex; border-radius: 4px;
+  cursor: pointer; padding: 4px; display: flex; border-radius: 0;
 }
 .ni-close:hover { background: var(--bg-muted, rgba(255,255,255,0.06)); color: var(--text); }
 .ni-form {
@@ -1100,7 +1171,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ni-field select {
   background: var(--bg-page, #0a0e0c);
   border: 1px solid var(--border, #2a2d33);
-  border-radius: 6px;
+  border-radius: 0;
   color: var(--text);
   font: inherit; font-size: var(--fs-body);
   padding: 8px 10px;
@@ -1127,7 +1198,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin-top: 4px;
 }
 .ni-btn {
-  border: 1px solid transparent; border-radius: 6px;
+  border: 1px solid transparent; border-radius: 0;
   padding: 7px 14px; font: inherit; font-size: var(--fs-body);
   cursor: pointer; transition: all 120ms;
 }
@@ -1138,7 +1209,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ni-btn-ghost:hover { background: var(--bg-muted, rgba(255,255,255,0.05)); color: var(--text); }
 .ni-btn-primary {
   background: var(--accent, #00d97e);
-  color: var(--bg-page); font-weight: 500;
+  color: var(--on-accent); font-weight: 500;
 }
 .ni-btn-primary:hover { background: var(--accent-hover); }
 .ni-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -1193,7 +1264,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin-top: 14px;
   background: var(--bg-muted);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 12px 14px;
   font-size: var(--fs-body);
   color: var(--text2);
@@ -1224,7 +1295,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .mem-item {
   display: flex; flex-direction: column; gap: 2px;
   padding: 10px 12px;
-  border-radius: 6px;
+  border-radius: 0;
   cursor: pointer;
   margin-bottom: 2px;
   border: 1px solid transparent;
@@ -1233,8 +1304,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .mem-item.active { background: var(--accent-soft); border-color: rgba(37, 64, 212, 0.16); }
 .mem-item .layer-tag {
   font-family: var(--mono); font-size: var(--fs-eyebrow);
-  color: var(--accent); letter-spacing: 0.06em;
-  font-weight: 600;
+  color: var(--accent-text); letter-spacing: 0.06em;
+  font-weight: 500;
 }
 .mem-item .name {
   font-family: var(--mono); font-size: var(--fs-small);
@@ -1270,8 +1341,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   max-width: 880px;
   margin: 0 auto;
 }
-.memory-doc h1 { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--text); }
-.memory-doc h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 28px 0 10px; color: var(--text); }
+.memory-doc h1 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--text); }
+.memory-doc h2 { font-family: var(--display); font-weight: 600; font-size: 20px; margin: 28px 0 10px; color: var(--text); }
 .memory-doc h3 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-title-s); margin: 18px 0 8px; color: var(--text); }
 .memory-doc p { font-size: var(--fs-base); line-height: 1.65; color: var(--text2); margin: 0 0 10px; }
 .memory-doc ul, .memory-doc ol { padding-left: 22px; margin: 0 0 12px; color: var(--text2); }
@@ -1279,14 +1350,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .memory-doc code {
   font-family: var(--mono); font-size: var(--fs-small);
   background: var(--bg-muted);
-  padding: 1px 6px; border-radius: 3px;
+  padding: 1px 6px; border-radius: 0;
   color: var(--text);
 }
 .memory-doc pre {
   font-family: var(--mono); font-size: var(--fs-small);
   background: var(--bg-strong);
   padding: 14px 16px;
-  border-radius: 8px;
+  border-radius: 0;
   overflow-x: auto;
   margin: 12px 0;
   line-height: 1.55;
@@ -1313,9 +1384,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .memory-doc-head .layer-tag {
   font-family: var(--mono); font-size: var(--fs-caption);
-  background: var(--accent-soft); color: var(--accent);
-  padding: 4px 10px; border-radius: 4px;
-  letter-spacing: 0.06em; font-weight: 600;
+  background: var(--accent-soft); color: var(--accent-text);
+  padding: 4px 10px; border-radius: 0;
+  letter-spacing: 0.06em; font-weight: 500;
 }
 .memory-doc-head .filename {
   font-family: var(--mono); font-size: var(--fs-body);
@@ -1335,9 +1406,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .tier-badge { font-size: var(--fs-caption); padding: 1px 8px; border-radius: 999px; margin-left: 6px;
   font-family: var(--mono); white-space: nowrap; }
 .tier-badge:empty { display: none; }
-.tier-badge.tier-T0 { background: var(--status-review); color: var(--on-solid); }
-.tier-badge.tier-T1 { background: var(--status-progress); color: var(--on-solid); }
-.tier-badge.tier-T2 { background: var(--status-blocked); color: var(--on-solid); }
+.tier-badge.tier-T0 { background: var(--status-review); color: var(--on-status); }
+.tier-badge.tier-T1 { background: var(--status-progress); color: var(--on-status); }
+.tier-badge.tier-T2 { background: var(--status-blocked); color: var(--on-status); }
 
 /* ── Pipeline track ───────────────────────────────────────────────────────── */
 .pipeline-track {
@@ -1346,7 +1417,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   padding: 14px 16px;
   background: var(--surface-translucent);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 0;
   overflow-x: auto;
 }
 .pl-stage {
@@ -1376,7 +1447,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .pl-recover { display: flex; gap: 6px; margin-top: 6px; }
 .pl-recover-btn {
   min-height: 26px; padding: 0 8px;
-  border: 1px solid var(--border); border-radius: 5px;
+  border: 1px solid var(--border); border-radius: 0;
   background: var(--bg-card); color: var(--text2);
   font-family: var(--mono); font-size: var(--fs-eyebrow); cursor: pointer;
 }
@@ -1445,7 +1516,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: flex; align-items: center; gap: 14px;
   padding: 22px 22px; margin-top: 4px;
   background: var(--surface-translucent); border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 0;
 }
 .inbox-allclear .ac-mark {
   width: 34px; height: 34px; flex-shrink: 0;
@@ -1457,7 +1528,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .inbox-allclear .ac-text b { color: var(--text); font-weight: 600; }
 .inbox-allclear .ac-actions { display: flex; gap: 8px; }
 .inbox-allclear .ac-btn {
-  font-size: var(--fs-body); padding: 7px 14px; border-radius: 8px;
+  font-size: var(--fs-body); padding: 7px 14px; border-radius: 0;
   border: 1px solid var(--border-strong); background: transparent;
   color: var(--text); cursor: pointer; transition: background 0.12s, border-color 0.12s;
 }
@@ -1470,7 +1541,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .pl-gate {
   background: var(--surface-translucent);
   border-left: 2px solid var(--border-strong);
-  border-radius: 6px;
+  border-radius: 0;
   margin: -4px 2px;
   padding: 12px 12px 10px;
 }
@@ -1487,7 +1558,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   background: var(--status-blocked); color: var(--on-solid);
   font-size: var(--fs-eyebrow); font-weight: 700;
   min-width: 16px; height: 16px; padding: 0 4px;
-  border-radius: 8px;
+  border-radius: 0;
   display: inline-flex; align-items: center; justify-content: center;
 }
 .pl-gate.active.fresh .pl-name .gate-glyph { animation: pl-pulse 1.4s infinite; }
@@ -1532,7 +1603,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   color: var(--text2);
 }
 .cost-cell .v {
-  font-family: var(--serif); font-weight: 500;
+  font-family: var(--display); font-weight: 500;
   font-variant-numeric: tabular-nums;
   font-size: var(--fs-num-s); letter-spacing: -0.02em;
   color: var(--text); line-height: 1.1;
@@ -1540,7 +1611,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .cost-cell .v small { font-size: var(--fs-base); color: var(--text2); margin-left: 2px; font-weight: 400; }
 .cost-cell .sub { font-size: var(--fs-caption); color: var(--text2); }
 .cost-cell.warn .v { color: var(--status-blocked); }
-.cost-cell.good .v { color: var(--status-review); }
+.cost-cell.good .v { color: var(--status-review-text); }
 
 .cost-chart {
   position: relative;
@@ -1556,7 +1627,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .cost-bar {
   flex: 1; min-width: 4px;
   background: var(--accent-soft);
-  border-radius: 2px 2px 0 0;
+  border-radius: 0;
   position: relative;
   cursor: pointer;
   transition: background 0.12s;
@@ -1569,7 +1640,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   bottom: calc(100% + 4px); left: 50%;
   transform: translateX(-50%);
   background: var(--bg-solid); color: var(--on-solid);
-  padding: 4px 8px; border-radius: 4px;
+  padding: 4px 8px; border-radius: 0;
   font-family: var(--mono); font-size: var(--fs-eyebrow);
   white-space: nowrap;
   display: none;
@@ -1586,7 +1657,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   cursor: pointer; font-size: var(--fs-small); color: var(--text2);
   padding: 4px 0; list-style-position: inside;
 }
-.cost-table summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
+.cost-table summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 0; }
 .cost-table table { border-collapse: collapse; width: 100%; margin-top: 6px; }
 .cost-table th, .cost-table td {
   text-align: left; padding: 5px 10px 5px 0;
@@ -1642,8 +1713,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   font-family: var(--mono); color: var(--text);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.feat-bar-wrap { background: var(--bg-strong); border-radius: 3px; height: 6px; }
-.feat-bar { height: 6px; border-radius: 3px; background: var(--accent); transition: width .3s; }
+.feat-bar-wrap { background: var(--bg-strong); border-radius: 0; height: 6px; }
+.feat-bar { height: 6px; border-radius: 0; background: var(--accent); transition: width .3s; }
 .feat-cost { font-family: var(--mono); color: var(--text); text-align: right; }
 .feat-runs { font-size: var(--fs-caption); color: var(--text3); text-align: right; }
 
@@ -1654,7 +1725,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin: 0 auto;
 }
 .inbox-greet {
-  font-family: var(--serif); font-weight: 600;
+  font-family: var(--display); font-weight: 500;
   font-size: clamp(22px, 2.5vw, 30px);
   letter-spacing: -0.02em;
   margin-bottom: 24px;
@@ -1667,12 +1738,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   background: var(--surface-translucent);
   backdrop-filter: blur(8px);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 14px 16px;
   display: flex; align-items: center; gap: 10px;
 }
 .inbox-summary .pill-stat .num {
-  font-family: var(--serif); font-weight: 500;
+  font-family: var(--display); font-weight: 500;
   font-variant-numeric: tabular-nums;
   font-size: var(--fs-num-s); letter-spacing: -0.02em;
   color: var(--text);
@@ -1702,7 +1773,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ac-primary:focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
-  border-radius: 8px;
+  border-radius: 0;
 }
 
 /* Reason chip — why a row is in the queue, carried by the row itself. */
@@ -1713,19 +1784,27 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   letter-spacing: 0.04em;
   padding: 1px 7px;
   margin-right: 8px;
-  border-radius: 5px;
+  border-radius: 0;
   border: 1px solid var(--border-strong);
   color: var(--text2);
   vertical-align: 1px;
 }
 .why-gate    { color: var(--status-gate);     border-color: var(--status-gate); }
+/* An expensive-to-undo gate must not wear the same chip as a routine one — that
+   equivalence is the finding this rule exists to remove. Colour AND a glyph:
+   colour alone fails the reader who cannot see it. */
+/* An expensive-to-undo gate must not wear the same chip as a routine one — that
+   equivalence is the whole finding. And `cost not classified` gets a third look,
+   because a gate nobody has judged is not a cheap gate. */
+.why-gate-expensive    { color: var(--status-blocked); border-color: var(--status-blocked); }
+.why-gate-unclassified { color: var(--p1-fg);          border-color: var(--p1-fg); }
 .why-p0      { color: var(--status-blocked);  border-color: var(--status-blocked); }
 .why-blocked { color: var(--status-progress); border-color: var(--status-progress); }
 .why-stale   { color: var(--text3); }
 
 .proj-status {
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 0;
   background: var(--bg-card);
   margin: 10px 0 18px;
 }
@@ -1748,14 +1827,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .proj-status-summary:focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
-  border-radius: 8px;
+  border-radius: 0;
 }
 /* A link with no colour rule gets the browser's default, which is on nobody's
    palette. This one — "stale, listed below" in the empty resume column — was
    added today without one, and the rendered-layout check found it on both themes
    within the hour. That is the check working on its author. */
 .resume-list a, .empty a { color: var(--accent-text); text-decoration: underline; }
-.resume-list a:hover, .empty a:hover { color: var(--accent); }
+.resume-list a:hover, .empty a:hover { color: var(--accent-text); }
 
 .proj-status-verdict { color: var(--text3); font-family: var(--mono); font-size: var(--fs-eyebrow); }
 .proj-status-body { padding: 0 16px 14px; }
@@ -1764,7 +1843,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .resume-card {
   background: linear-gradient(135deg, rgba(0, 217, 126, 0.04), var(--surface-translucent));
   border: 1px solid rgba(0, 217, 126, 0.18);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 18px 20px;
   margin-bottom: 28px;
   backdrop-filter: blur(8px);
@@ -1774,7 +1853,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin-bottom: 14px;
 }
 .resume-icon {
-  display: inline-flex; color: var(--accent);
+  display: inline-flex; color: var(--accent-text);
 }
 .resume-title {
   font-family: var(--sans); font-weight: 600;
@@ -1814,13 +1893,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .resume-list .resume-item .ri-tag {
   flex-shrink: 0;
   font-family: var(--mono); font-size: var(--fs-eyebrow);
-  padding: 2px 5px; border-radius: 3px;
+  padding: 2px 5px; border-radius: 0;
   letter-spacing: 0.04em;
   background: rgba(255,255,255,0.05);
   color: var(--text3);
   margin-top: 1px;
 }
-.resume-list .resume-item .ri-tag.ok { color: var(--accent); background: rgba(0,217,126,0.08); }
+.resume-list .resume-item .ri-tag.ok { color: var(--accent-text); background: rgba(0,217,126,0.08); }
 .resume-list .resume-item .ri-tag.fail { color: var(--p1-fg); background: rgba(255,80,80,0.08); }
 .resume-list .resume-item .ri-text {
   flex: 1; min-width: 0;
@@ -1863,13 +1942,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   padding: 12px 14px;
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0;
   margin-bottom: 6px;
   transition: box-shadow .12s, transform .12s;
   cursor: pointer;
   min-width: 0;
 }
-.inbox-row:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
+.inbox-row:hover { box-shadow: none; transform: translateY(-1px); }
 .inbox-row .id {
   padding-top: 2px;
   font-family: var(--mono); font-size: var(--fs-caption);
@@ -1938,7 +2017,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    blocked colour — so "sat here longest" is legible at a glance instead of
    requiring five timestamps to be compared by eye. */
 .inbox-row.row-aged { border-left: 3px solid var(--status-blocked); }
-.inbox-row.row-aged .actions.age-col .age { color: var(--status-blocked); font-weight: 600; }
+/* Colour carries this, not weight: the age is mono, whose axis stops at 500,
+   so 600 only buys a synthetic stroke. */
+.inbox-row.row-aged .actions.age-col .age { color: var(--status-blocked); font-weight: 500; }
 
 /* Quiet page footer for conditions that report but do not ask. */
 .inbox-foot-note {
@@ -1952,7 +2033,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .budgets-failed .bf-note { font-size: var(--fs-body); color: var(--text2); line-height: 1.5; margin-bottom: 14px; }
 .judge-status {
   display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
-  padding: 10px 12px; margin-bottom: 16px; border-radius: 8px;
+  padding: 10px 12px; margin-bottom: 16px; border-radius: 0;
   background: var(--bg-muted); border: 1px solid var(--border);
   font-size: var(--fs-body);
 }
@@ -1965,11 +2046,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .jscores[hidden] { display: none; }
 .jscores-head {
   display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
-  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px 8px 0 0;
+  padding: 10px 12px; border: 1px solid var(--border); border-radius: 0;
   background: var(--bg-muted); font-size: var(--fs-body);
 }
 .jscores-head .rate { font-size: var(--fs-num-s); font-weight: 600; }
-.jscores-rows { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; }
+.jscores-rows { border: 1px solid var(--border); border-top: 0; border-radius: 0; }
 .jscore {
   display: grid; grid-template-columns: minmax(9rem, 12rem) 7.5rem 1fr auto;
   gap: 12px; align-items: baseline;
@@ -1997,7 +2078,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .judge-status .js-form { display: flex; gap: 8px; align-items: center; margin-left: auto; }
 .judge-status input {
   font-family: var(--mono); font-size: var(--fs-small); padding: 5px 8px;
-  border: 1px solid var(--border-strong); border-radius: 6px;
+  border: 1px solid var(--border-strong); border-radius: 0;
   background: var(--bg-card); color: var(--text); min-width: 26ch;
 }
 .budgets-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
@@ -2024,7 +2105,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .budgets-table .bt-actions { text-align: right; white-space: nowrap; }
 .budgets-table .bt-actions .ab-btn + .ab-btn { margin-left: 6px; }
 .budgets-empty {
-  padding: 16px; border: 1px dashed var(--border-strong); border-radius: 8px;
+  padding: 16px; border: 1px dashed var(--border-strong); border-radius: 0;
   color: var(--text2); font-size: var(--fs-body);
 }
 .budgets-uncapped { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@@ -2032,7 +2113,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .docs-search input {
   flex: 1 1 auto; min-width: 0; max-width: 460px;
   height: 32px; padding: 0 10px;
-  border: 1px solid var(--border); border-radius: 8px;
+  border: 1px solid var(--border); border-radius: 0;
   background: var(--bg-card); color: var(--text); font: inherit; font-size: var(--fs-body);
 }
 .docs-search input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@@ -2045,7 +2126,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: block; width: 100%;
   margin-top: 6px; padding: 8px;
   font-family: var(--mono); font-size: var(--fs-caption);
-  border: 1px dashed var(--border-strong); border-radius: 8px;
+  border: 1px dashed var(--border-strong); border-radius: 0;
   background: transparent; color: var(--text2);
 }
 .col-more:hover { border-style: solid; color: var(--text); }
@@ -2053,7 +2134,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .inbox-empty {
   padding: 14px 16px;
   background: var(--bg-muted);
-  border-radius: 8px;
+  border-radius: 0;
   font-size: var(--fs-small); color: var(--text3);
   text-align: center;
 }
@@ -2071,7 +2152,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .window-fill {
   font-size: var(--fs-body); color: var(--text2); line-height: 1.5;
-  padding: 8px 12px; margin-bottom: 12px; border-radius: 8px;
+  padding: 8px 12px; margin-bottom: 12px; border-radius: 0;
   background: var(--bg-muted); border: 1px solid var(--border);
 }
 .window-fill[hidden] { display: none; }
@@ -2086,22 +2167,22 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .period-chips {
   display: flex; gap: 4px;
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 8px; padding: 3px;
+  border-radius: 0; padding: 3px;
 }
 .period-chip {
   background: transparent; border: none; color: var(--text2);
-  padding: 5px 12px; border-radius: 5px;
+  padding: 5px 12px; border-radius: 0;
   font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
   letter-spacing: 0.05em; cursor: pointer;
   transition: background .12s, color .12s;
 }
 .period-chip:hover { color: var(--text); }
 .period-chip.active {
-  background: var(--accent); color: var(--bg-page);
+  background: var(--accent); color: var(--on-accent);
 }
 .metric-card {
   background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: 12px; padding: 26px 24px;
+  border-radius: 0; padding: 26px 24px;
   position: relative; overflow: hidden;
 }
 .metric-card::before {
@@ -2114,7 +2195,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .metric-card.red::before   { background: var(--status-blocked); }
 .metric-card.purple::before { background: var(--metric-purple); }
 .metric-num {
-  font-family: var(--serif); font-weight: 500;
+  font-family: var(--display); font-weight: 500;
   /* The board is live (SSE). In a proportional face a 1 is narrower than an 8,
      so a figure that ticks over re-flows its own width and the number appears to
      breathe. Tabular figures cost nothing here and stop it. */
@@ -2136,11 +2217,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .delta {
   margin-left: 6px;
-  font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 600;
+  font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500;
   letter-spacing: 0.02em; white-space: nowrap;
   color: var(--text3); cursor: help;
 }
-.delta.up   { color: var(--status-review); }
+.delta.up   { color: var(--status-review-text); }
 .delta.down { color: var(--status-progress); }
 .metric-num small {
   font-size: var(--fs-title-l); color: var(--text2);
@@ -2167,7 +2248,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .mp-card {
   background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: 12px; padding: 22px;
+  border-radius: 0; padding: 22px;
 }
 .mp-card h3 {
   font-family: var(--sans); font-weight: 600;
@@ -2182,9 +2263,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .feed-cost {
   font-family: var(--mono); font-size: var(--fs-eyebrow);
-  color: var(--accent);
+  color: var(--accent-text);
   background: var(--accent-soft);
-  padding: 2px 6px; border-radius: 4px;
+  padding: 2px 6px; border-radius: 0;
   margin-right: 6px;
 }
 
@@ -2235,7 +2316,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .logs-header { padding: 20px 24px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 16px; }
 .logs-header h2 { margin: 0; font-size: var(--fs-title-l); letter-spacing: -0.02em; }
 .logs-hint { font-size: var(--fs-small); color: var(--text3); }
-.logs-hint code { font-family: var(--mono); background: var(--bg-strong); padding: 1px 5px; border-radius: 3px; }
+.logs-hint code { font-family: var(--mono); background: var(--bg-strong); padding: 1px 5px; border-radius: 0; }
 .logs-layout { display: flex; flex: 1; overflow: hidden; }
 .logs-list { width: 280px; min-width: 220px; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; flex-shrink: 0; }
 .logs-detail { flex: 1; overflow-y: auto; padding: 24px 28px; }
@@ -2266,7 +2347,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .log-section-label { font-size: var(--fs-caption); color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
 .log-bullets { list-style: none; padding: 0; margin: 0; }
 .log-bullets li { padding: 3px 0 3px 12px; position: relative; font-size: var(--fs-body); color: var(--text2); }
-.log-bullets li::before { content: '·'; position: absolute; left: 0; color: var(--accent); }
+.log-bullets li::before { content: '·'; position: absolute; left: 0; color: var(--accent-text); }
 .log-empty { font-size: var(--fs-body); color: var(--text3); font-style: italic; }
 
 /* ── Agents installed list (legacy — kept for fallback) ───────────────── */
@@ -2274,14 +2355,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 /* Agent budget bars (Paperclip cascading budget pattern) */
 .ab-title { font-weight: 600; color: var(--text2); margin-bottom: 6px; }
 .ab-row { display: flex; justify-content: space-between; padding: 2px 0; }
-.ab-name { font-family: var(--mono, monospace); color: var(--accent); }
+.ab-name { font-family: var(--mono, monospace); color: var(--accent-text); }
 .ab-cap { color: var(--text3); }
-.agent-card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
-.agent-card .ac-name { font-size: var(--fs-small); font-weight: 600; font-family: var(--mono); color: var(--accent); }
+.agent-card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 0; padding: 10px 12px; }
+.agent-card .ac-name { font-size: var(--fs-small); font-weight: 500; font-family: var(--mono); color: var(--accent-text); }
 .agent-card .ac-desc { font-size: var(--fs-caption); color: var(--text3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .agent-card .ac-meta { font-size: var(--fs-eyebrow); color: var(--text3); margin-top: 5px; display: flex; gap: 8px; }
-.agent-card .ac-model { background: var(--bg-strong); padding: 1px 5px; border-radius: 3px; }
-.agent-card .ac-used { color: var(--status-review); }
+.agent-card .ac-model { background: var(--bg-strong); padding: 1px 5px; border-radius: 0; }
+.agent-card .ac-used { color: var(--status-review-text); }
 .agent-card .ac-never { color: var(--text3); font-style: italic; }
 
 /* ── Agents fleet view (DESIGN-agents-fleet-view §3) ───────────────────
@@ -2310,7 +2391,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   flex: 1; max-width: 320px;
   background: var(--bg-muted); border: 1px solid var(--border);
   color: var(--text); font-family: var(--mono); font-size: var(--fs-body);
-  padding: 8px 12px; border-radius: 6px;
+  padding: 8px 12px; border-radius: 0;
 }
 .fleet-search input[type="search"]:focus {
   outline: 2px solid var(--focus-ring); outline-offset: 1px;
@@ -2319,7 +2400,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .fleet-search .search-hint { font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
 .fleet-search .search-hint kbd {
   background: var(--bg-muted); border: 1px solid var(--border);
-  border-radius: 3px; padding: 1px 5px; font-size: var(--fs-eyebrow);
+  border-radius: 0; padding: 1px 5px; font-size: var(--fs-eyebrow);
 }
 
 .fleet-facets { display: flex; flex-direction: column; gap: 6px; }
@@ -2334,13 +2415,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .facet-chip {
   background: var(--bg-muted); border: 1px solid var(--border);
   color: var(--text2); font-size: var(--fs-small); font-family: var(--mono);
-  padding: 4px 10px; border-radius: 12px; cursor: pointer;
+  padding: 4px 10px; border-radius: 0; cursor: pointer;
   transition: background-color 0.15s, color 0.15s, border-color 0.15s;
 }
 .facet-chip:hover { color: var(--text); border-color: var(--border-strong); }
 .facet-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .facet-chip[aria-checked="true"] {
-  background: var(--accent-soft); color: var(--accent);
+  background: var(--accent-soft); color: var(--accent-text);
   border-color: var(--accent-strong);
 }
 .facet-chip[disabled] { opacity: 0.4; cursor: not-allowed; }
@@ -2352,12 +2433,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .fleet-sort select {
   background: var(--bg-muted); border: 1px solid var(--border);
   color: var(--text); font-family: var(--mono); font-size: var(--fs-small);
-  padding: 4px 8px; border-radius: 6px;
+  padding: 4px 8px; border-radius: 0;
 }
 .fleet-sort button {
   background: transparent; border: 1px solid var(--border);
   color: var(--text2); font-size: var(--fs-caption); font-family: var(--mono);
-  padding: 4px 8px; border-radius: 6px;
+  padding: 4px 8px; border-radius: 0;
 }
 .fleet-sort button:hover { color: var(--text); border-color: var(--border-strong); }
 
@@ -2373,7 +2454,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   width: 100%; min-height: 44px;
   background: transparent; border: 1px solid transparent;
   color: var(--text); text-align: left; font: inherit;
-  padding: 10px 12px; border-radius: 6px; cursor: pointer;
+  padding: 10px 12px; border-radius: 0; cursor: pointer;
   transition: background-color 0.15s, border-color 0.15s;
 }
 .agent-row:hover { background: var(--bg-muted); border-color: var(--border); }
@@ -2396,12 +2477,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .agent-row .ar-name { font-family: var(--mono); font-size: var(--fs-body); color: var(--text); }
 .agent-row .ar-meta { font-size: var(--fs-caption); color: var(--text3); display: flex; gap: 10px; flex-wrap: wrap; }
 .agent-row .ar-meta .ar-domain {
-  background: var(--bg-muted); padding: 1px 6px; border-radius: 3px;
+  background: var(--bg-muted); padding: 1px 6px; border-radius: 0;
   color: var(--text2); font-family: var(--mono); font-size: var(--fs-eyebrow);
 }
 .agent-row .ar-rail {
   width: 80px; height: 4px;
-  background: var(--rail-ok-bg); border-radius: 2px; overflow: hidden;
+  background: var(--rail-ok-bg); border-radius: 0; overflow: hidden;
 }
 .agent-row.status-failing .ar-rail { background: var(--rail-fail-bg); }
 .agent-row .ar-rail-fill {
@@ -2417,7 +2498,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .status-pill {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: var(--fs-caption); font-family: var(--mono);
-  padding: 2px 8px; border-radius: 10px;
+  padding: 2px 8px; border-radius: 0;
   background: var(--bg-muted); border: 1px solid var(--border);
 }
 .status-pill .pill-dot {
@@ -2441,11 +2522,12 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   width: 480px; max-width: 90vw;
   background: var(--surface-drawer);
   border-left: 1px solid var(--border-strong);
-  box-shadow: var(--drawer-shadow);
+  box-shadow: none;
   display: flex; flex-direction: column;
   z-index: 10;
   transform: translateX(100%);
   transition: transform 200ms ease-out;
+  border: 1px solid var(--border-strong);
 }
 .agent-drawer[open] { transform: translateX(0); }
 @media (prefers-reduced-motion: reduce) {
@@ -2463,7 +2545,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .agent-drawer-close {
   background: transparent; border: 1px solid var(--border);
   color: var(--text2); font-size: var(--fs-title-m); line-height: 1;
-  width: 28px; height: 28px; border-radius: 6px;
+  width: 28px; height: 28px; border-radius: 0;
   display: flex; align-items: center; justify-content: center;
 }
 .agent-drawer-close:hover { color: var(--text); border-color: var(--border-strong); }
@@ -2506,7 +2588,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .agent-actions button {
   background: var(--bg-muted); border: 1px solid var(--border);
   color: var(--text); font-family: var(--mono); font-size: var(--fs-small);
-  padding: 6px 12px; border-radius: 6px;
+  padding: 6px 12px; border-radius: 0;
 }
 .agent-actions button:hover { border-color: var(--border-strong); }
 .agent-actions button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@@ -2537,11 +2619,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   width: 100%; max-width: 640px;
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 0;
   padding: 32px;
 }
 .share-card h2:not(.section-title) {
-  font-family: var(--serif); font-weight: 500;
+  font-family: var(--display); font-weight: 500;
   font-size: 28px; letter-spacing: -0.01em;
   margin: 0 0 6px;
 }
@@ -2551,14 +2633,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   padding: 16px 18px;
   background: var(--bg-muted);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 0;
   margin-bottom: 16px;
 }
 .share-toggle-row .label-grp { flex: 1; }
 .share-toggle-row .label-grp .l { font-weight: 600; font-size: var(--fs-base); }
 .share-toggle-row .label-grp .h { color: var(--text2); font-size: var(--fs-small); }
 
-.notif-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; }
+.notif-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 0; cursor: pointer; transition: border-color 0.15s; }
 .notif-row:hover { border-color: var(--accent); }
 .notif-row .emoji { font-size: 16px; flex-shrink: 0; }
 .notif-row strong { color: var(--text); margin-right: 4px; }
@@ -2579,7 +2661,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   background: var(--bg-card);
   border-radius: 50%;
   transition: transform 0.15s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: none;
 }
 .toggle.on { background: var(--accent); }
 .toggle.on::after { transform: translateX(16px); }
@@ -2590,7 +2672,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   padding: 10px 12px;
   background: var(--bg-card);
   border: 1px solid var(--border-strong);
-  border-radius: 10px;
+  border-radius: 0;
   margin-top: 16px;
 }
 .url-block .url-text {
@@ -2621,7 +2703,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   display: flex; align-items: center; gap: 10px;
   padding: 12px 16px;
   background: var(--bg-muted);
-  border-radius: 10px;
+  border-radius: 0;
   font-size: var(--fs-body); color: var(--text2);
   margin-top: 12px;
 }
@@ -2642,7 +2724,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.share-badge.on  { background: rgba(22, 163, 74, 0.12); color: var(--status-review); }
+.share-badge.on  { background: rgba(22, 163, 74, 0.12); color: var(--status-review-text); }
 .share-badge.off { background: var(--bg-strong); color: var(--text3); }
 .share-badge-dot {
   width: 5px; height: 5px; border-radius: 50%;
@@ -2670,7 +2752,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   transition: background 0.12s, color 0.12s, border-color 0.12s;
 }
 .fchip:hover { background: var(--bg-elevated); color: var(--text); border-color: var(--border-strong); }
-.fchip.active { background: var(--accent); color: var(--on-solid); border-color: transparent; }
+.fchip.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .fchip-agent.active { background: var(--chip-agent); }
 .fchip-priority.active { background: var(--status-progress); color: var(--on-warm); }
 .fchip-label.active { background: var(--accent); }
@@ -2699,8 +2781,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   bottom: calc(100% + 4px); left: 0;
   background: var(--bg-card);
   border: 1px solid var(--border-strong);
-  border-radius: 6px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  border-radius: 0;
+  box-shadow: none;
   z-index: 500;
   padding: 4px;
   min-width: 130px;
@@ -2708,7 +2790,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .sp-item {
   display: flex; align-items: center; gap: 8px;
   padding: 6px 10px;
-  border-radius: 4px;
+  border-radius: 0;
   font-size: var(--fs-small); font-weight: 500;
   color: var(--text);
   background: transparent; border: none;
@@ -2750,24 +2832,24 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin-top: 4px; flex-shrink: 0;
 }
 .tl-content { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
-.tl-actor { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 600; color: var(--accent); }
+.tl-actor { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; color: var(--accent-text); }
 .tl-action { color: var(--text2); }
 .tl-change {
   font-family: var(--mono); font-size: var(--fs-caption);
   background: var(--bg-strong); color: var(--text);
-  padding: 1px 6px; border-radius: 3px;
+  padding: 1px 6px; border-radius: 0;
 }
 .tl-ts { margin-left: auto; font-family: var(--mono); font-size: var(--fs-eyebrow); color: var(--text3); }
 .side-section-head { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; margin-top: 16px; }
 
 /* ── Security tab: hero KPI tile + activity feed ──────────────────────────── */
 .kpi-hero .kpi-value-hero {
-  font-family: var(--serif); font-weight: 500;
+  font-family: var(--display); font-weight: 500;
   font-variant-numeric: tabular-nums;
   font-size: var(--fs-num-l); line-height: 1.1; letter-spacing: -0.02em;
 }
 .kpi-hero .kpi-label { font-size: var(--fs-body); font-weight: 500; }
-.kpi-empty .kpi-value { color: var(--accent); font-size: var(--fs-title-l); }
+.kpi-empty .kpi-value { color: var(--accent-text); font-size: var(--fs-title-l); }
 .kpi-empty .kpi-value::after {
   content: ' all clear'; font-size: var(--fs-caption); color: var(--text3); font-weight: 400;
 }
@@ -2793,7 +2875,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
        it waits for the slide to finish (`0s linear 200ms`), so the panel does
        not vanish mid-animation. */
     transition: transform 200ms ease-out, visibility 0s linear 200ms;
-    box-shadow: var(--drawer-shadow);
+    box-shadow: none;
   }
   .sidebar.open {
     transform: none; visibility: visible;
@@ -3064,7 +3146,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
             </div>
           </div>
         </div>
-        <div id="tool-failure-rate" style="display:none;font-size:var(--fs-small);color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:6px;margin-bottom:10px;"></div>
+        <div id="tool-failure-rate" style="display:none;font-size:var(--fs-small);color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:0;margin-bottom:10px;"></div>
 
         <div class="inbox-section">
           <div class="inbox-section-head">
@@ -3410,7 +3492,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           <div id="notif-step-email">
             <div style="font-size:var(--fs-caption);color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">RECIPIENT EMAIL</div>
             <div style="display:flex;gap:8px;flex-wrap:wrap">
-              <input id="notif-to" type="email" placeholder="you@example.com" style="flex:1 1 280px;min-width:240px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:var(--fs-base)" />
+              <input id="notif-to" type="email" placeholder="you@example.com" style="flex:1 1 280px;min-width:240px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:0;color:var(--text);font-size:var(--fs-base)" />
               <button class="btn-black" onclick="sendVerifyCode()">Send code</button>
             </div>
           </div>
@@ -3419,15 +3501,15 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           <div id="notif-step-code" style="display:none;margin-top:14px">
             <div style="font-size:var(--fs-caption);color:var(--text3);margin-bottom:4px;font-family:var(--mono);letter-spacing:.05em">VERIFICATION CODE (CHECK <span id="notif-code-target">YOUR INBOX</span>)</div>
             <div style="display:flex;gap:8px;flex-wrap:wrap">
-              <input id="notif-code" type="text" inputmode="numeric" pattern="\d{6}" maxlength="6" placeholder="123456" style="flex:1 1 200px;min-width:140px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:var(--fs-title-m);font-family:var(--mono);letter-spacing:.2em;text-align:center" />
+              <input id="notif-code" type="text" inputmode="numeric" pattern="\d{6}" maxlength="6" placeholder="123456" style="flex:1 1 200px;min-width:140px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border);border-radius:0;color:var(--text);font-size:var(--fs-title-m);font-family:var(--mono);letter-spacing:.2em;text-align:center" />
               <button class="btn-black" onclick="confirmVerifyCode()">Verify</button>
               <button class="btn-ghost-sm" onclick="sendVerifyCode()">Resend code</button>
             </div>
           </div>
 
           <!-- Step 3: verified -->
-          <div id="notif-step-verified" style="display:none;margin-top:14px;padding:10px 14px;background:rgba(0,217,126,0.08);border:1px solid rgba(0,217,126,0.30);border-radius:8px;display:none;align-items:center;gap:10px;font-size: var(--fs-body)">
-            <span style="color:var(--accent);font-size:var(--fs-title-m)">✓</span>
+          <div id="notif-step-verified" style="display:none;margin-top:14px;padding:10px 14px;background:rgba(0,217,126,0.08);border:1px solid rgba(0,217,126,0.30);border-radius:0;display:none;align-items:center;gap:10px;font-size: var(--fs-body)">
+            <span style="color:var(--accent-text);font-size:var(--fs-title-m)">✓</span>
             <span><strong id="notif-verified-email">—</strong> verified · alerts delivered through <code>greatcto.systems/notify</code></span>
             <button class="btn-ghost-sm" style="margin-left:auto" onclick="changeEmail()">Change</button>
           </div>
@@ -3479,7 +3561,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           <h2 class="section-title">Recent notifications</h2>
           <p class="sub">Last 100 alerts fired this session. Also accessible via the notification drawer (bell icon).</p>
           <div id="notif-history-inline" style="display:flex;flex-direction:column;gap:0;margin-top:12px;
-            border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:var(--fs-body)">
+            border:1px solid var(--border);border-radius:0;overflow:hidden;font-size:var(--fs-body)">
             <div id="notif-history-empty" style="padding:20px 16px;color:var(--text3);text-align:center">
               No notifications yet this session.
             </div>
@@ -3563,6 +3645,30 @@ function greetByHour() {
   return 'Good evening.';
 }
 
+// What is waiting on the person in the projects this screen is not showing.
+//
+// "Nothing is waiting on you" was written above a project inbox while two P0s
+// sat open in another project of the same operator's. True of the project,
+// false of the person — and the person is who reads it. The server now sends
+// `elsewhere` with the inbox; this turns it into the clause the headline needs.
+//
+// Three states. A payload without `elsewhere` (an older server) or one marked
+// unreadable says NOTHING about other projects, so the headline must not claim
+// "nothing elsewhere" — `known` is false and the clause is empty. Known and
+// empty is an honest zero. Known and non-empty is the sentence.
+function elsewhereClause(e) {
+  if (!e || e.state === 'unreadable') return { known: false, text: '' };
+  const p0 = Number(e.p0) || 0;
+  const gates = Number(e.gates) || 0;
+  const m = (e.projects || []).length;
+  if (!p0 && !gates) return { known: true, text: '' };
+  const parts = [];
+  if (p0) parts.push(`${p0} P0`);
+  if (gates) parts.push(`${gates} gate${gates > 1 ? 's' : ''}`);
+  const verb = p0 + gates > 1 ? 'are' : 'is';
+  return { known: true, text: `${parts.join(' and ')} in ${m} other project${m > 1 ? 's' : ''} ${verb} waiting on you.` };
+}
+
 function renderInbox(d) {
   // Kept so renderResume can ask what this section is already showing, rather
   // than the two of them rendering the same task independently.
@@ -3573,8 +3679,20 @@ function renderInbox(d) {
   // anything that matched two of them — a P0 that is also blocked read as two things
   // needing attention when it was one. Older payloads have no `needs_you`, so the sum
   // stays as the fallback rather than rendering nothing.
-  document.getElementById('nav-inbox-count').textContent =
-    Number.isFinite(s.needs_you) ? s.needs_you : s.gates + s.p0 + s.blocked;
+  // The badge counts the PERSON: this project's distinct needs, plus the P0s
+  // and gates waiting in their other projects. A badge reading 0 beside two
+  // open P0s one project over is the same lie as the headline was. When
+  // `elsewhere` is unknown the badge shows what it knows and says so in its
+  // title rather than adding a zero it never measured.
+  const here = Number.isFinite(s.needs_you) ? s.needs_you : s.gates + s.p0 + s.blocked;
+  const ew = d?.elsewhere;
+  const ewKnown = ew && ew.state !== 'unreadable';
+  const away = ewKnown ? (Number(ew.p0) || 0) + (Number(ew.gates) || 0) : 0;
+  const badge = document.getElementById('nav-inbox-count');
+  badge.textContent = here + away;
+  badge.title = ewKnown
+    ? `${here} here · ${away} in other projects`
+    : `${here} here · other projects not read`;
   // Same rule as the all-clear card: "nothing urgent" is a claim about data we
   // may not have. When a read failed, say that instead of reassuring the user.
   // The headline states the SITUATION, not the time of day.
@@ -3609,9 +3727,14 @@ function renderInbox(d) {
     greetEl.textContent = 'Some data could not be read — treat the counts below as incomplete.';
   } else if (newestEventAgeH != null && newestEventAgeH > STALL_H) {
     const days = Math.floor(newestEventAgeH / 24);
+    // "Here", because the count above is this project's. What the person has
+    // waiting in other projects is appended — or, when it could not be read,
+    // nothing is claimed about them at all.
+    const ew = elsewhereClause(d?.elsewhere);
+    const tail = ew.text ? ` ${ew.text}` : (ew.known ? ' Nothing elsewhere either.' : '');
     greetEl.textContent = needs
-      ? `Stalled — nothing has moved in ${days} days, and ${needs} item${needs > 1 ? 's' : ''} ${needs > 1 ? 'are' : 'is'} waiting on you.`
-      : `Stalled — nothing has moved in ${days} days, and nothing is waiting on you either.`;
+      ? `Stalled — nothing has moved in ${days} days, and ${needs} item${needs > 1 ? 's' : ''} ${needs > 1 ? 'are' : 'is'} waiting on you here.${tail}`
+      : `Stalled — nothing has moved in ${days} days, and nothing is waiting on you here.${tail}`;
   } else if (needs) {
     greetEl.textContent = "Here's what needs your decision.";
   } else {
@@ -3653,14 +3776,22 @@ function renderInbox(d) {
       const stalled = newestEventAgeH != null && newestEventAgeH > STALL_H;
       const txt = ac.querySelector('.ac-text');
       const mark = ac.querySelector('.ac-mark');
+      // The card is about the person, so it may not say "all clear" while the
+      // same person has a P0 open one project over. `elsewhere` arrives with the
+      // inbox payload; unknown (older server, unreadable) claims nothing.
+      const ew = elsewhereClause(window.__inboxData?.elsewhere);
+      const elsewhereHtml = ew.text ? ` <b>${ew.text}</b>` : (ew.known ? ' Nothing elsewhere either.' : '');
       if (stalled) {
         const days = Math.floor(newestEventAgeH / 24);
-        if (mark) mark.textContent = '·';
-        if (txt) txt.innerHTML = `<b>Nothing is waiting on you.</b> Nothing has run in `
-          + `${days} days either — this project is idle, not finished.`;
+        if (mark) mark.textContent = ew.text ? '!' : '\u00b7';
+        if (txt) txt.innerHTML = `<b>Nothing is waiting on you here.</b> Nothing has run in `
+          + `${days} days either — this project is idle, not finished.${elsewhereHtml}`;
+      } else if (ew.text) {
+        if (mark) mark.textContent = '!';
+        if (txt) txt.innerHTML = `<b>Nothing needs your decision here.</b>${elsewhereHtml}`;
       } else {
         if (mark) mark.textContent = '\u2713';
-        if (txt) txt.innerHTML = '<b>All clear.</b> Nothing needs your decision — back to deep work.';
+        if (txt) txt.innerHTML = `<b>All clear.</b> Nothing needs your decision here — back to deep work.${elsewhereHtml}`;
       }
     }
   }
@@ -3717,8 +3848,18 @@ function renderQueue(d) {
   const queue = [
     // An expired gate is still a gate, and saying so is the whole point: the row
     // that lost its buttons for 699 hours looked like an ordinary P0.
-    ...withReason(d?.pending_gates, (t) =>
-      (t.raw_status === 'blocked' ? 'expired gate' : 'gate')),
+    // ADR-009 puts gates on cost-of-undo, and the map obeys it — but until now
+    // every gate reached this row as the same word. `gate:ship` to production and
+    // a brief approval read identically at the moment somebody clicks, which is
+    // the one place the doctrine had never been applied. The three states come
+    // from the API; `unclassified` deliberately does NOT fall back to `gate`.
+    ...withReason(d?.pending_gates, (t) => {
+      if (t.raw_status === 'blocked') return 'expired gate';
+      const st = t.reversibility?.state;
+      if (st === 'expensive') return 'gate · expensive to undo';
+      if (st === 'unclassified') return 'gate · cost not classified';
+      return 'gate';
+    }),
     ...withReason(d?.p0_open, (t) => (t.is_gate ? 'expired gate' : 'P0')),
     ...withReason(d?.blocked, 'blocked'),
     ...withReason(d?.stale_in_progress, (t) => {
@@ -3865,7 +4006,7 @@ function freshnessBadge(doc) {
   const unreadable = doc.freshnessBasis === 'unreadable';
   const colour = v === 'stale' ? 'var(--status-gate)' : 'var(--text3)';
   const label = v === 'stale' ? 'stale' : (unreadable ? 'could not read' : 'unknown');
-  return `<span title="${esc(doc.freshnessWhy || '')}" style="font-family:var(--mono);font-size:var(--fs-eyebrow);margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:3px;color:${colour}">${esc(label)}</span>`;
+  return `<span title="${esc(doc.freshnessWhy || '')}" style="font-family:var(--mono);font-size:var(--fs-eyebrow);margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:0;color:${colour}">${esc(label)}</span>`;
 }
 
 // Will this gate wait for you, or did the pipeline already go past it?
@@ -3900,7 +4041,7 @@ function gateTierNote(t) {
   // It is the reading most worth a second look, so it reads differently.
   const caveat = thin ? ' — one eval, coverage unmeasured' : '';
   return `<div style="margin-top:3px;font-size:var(--fs-caption);color:${colour}">
-    <span style="font-family:var(--mono);border:1px solid var(--border);border-radius:3px;padding:0 4px">${esc(info.tier)}</span>
+    <span style="font-family:var(--mono);border:1px solid var(--border);border-radius:0;padding:0 4px">${esc(info.tier)}</span>
     the pipeline did not wait for this${esc(caveat)} · <span title="${esc(info.why || '')}">${esc((info.why || '').slice(0, 90))}</span>
   </div>`;
 }
@@ -3939,7 +4080,7 @@ async function refreshStandDowns() {
     // unmeasured coverage. That is the row most worth a second look, so it is
     // the row that looks different.
     const thin = r.tier === 'notify-thin';
-    const tierTag = `<span style="font-family:var(--mono);font-size:var(--fs-eyebrow);padding:1px 5px;border-radius:3px;border:1px solid var(--border);color:${thin ? 'var(--status-gate)' : 'var(--text3)'}">${esc(r.tier || 'unknown')}</span>`;
+    const tierTag = `<span style="font-family:var(--mono);font-size:var(--fs-eyebrow);padding:1px 5px;border-radius:0;border:1px solid var(--border);color:${thin ? 'var(--status-gate)' : 'var(--text3)'}">${esc(r.tier || 'unknown')}</span>`;
     return `
       <div class="inbox-row">
         <span class="id">gate:${esc(r.gate || '?')}</span>
@@ -4129,7 +4270,14 @@ function renderInboxList(rootId, items, countId, opts = {}) {
     // carry this fact in their headings, where it was lost the moment an item moved
     // between them — which is how an expired gate became indistinguishable from an
     // ordinary P0 for 699 hours.
-    const REASON_TONE = { 'expired gate': 'gate', gate: 'gate', P0: 'p0', blocked: 'blocked' };
+    const REASON_TONE = {
+      'expired gate': 'gate', gate: 'gate', P0: 'p0', blocked: 'blocked',
+      // The class is looked up HERE, not derived from the string — a reason with
+      // no entry renders `class="why why-"` and is styled by nothing. Adding the
+      // reason without adding the tone is how a new chip ships invisible.
+      'gate · expensive to undo': 'gate-expensive',
+      'gate · cost not classified': 'gate-unclassified',
+    };
     const tone = REASON_TONE[t.__reason] || (String(t.__reason || '').startsWith('stale') ? 'stale' : '');
     const reasonChip = (opts.reasons && t.__reason)
       ? `<span class="why why-${tone}">${esc(t.__reason)}</span>`
@@ -4885,7 +5033,7 @@ function showVerdictDetail(idx) {
         <div class="rdm-artefacts-title">Artefacts (click to open in editor)</div>
         ${artefactsHtml}
       </div>
-      <div class="rdm-foot">Press <kbd style="background:var(--bg-muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:var(--fs-eyebrow);">Esc</kbd> or click outside to close</div>
+      <div class="rdm-foot">Press <kbd style="background:var(--bg-muted);border:1px solid var(--border);border-radius:0;padding:1px 5px;font-size:var(--fs-eyebrow);">Esc</kbd> or click outside to close</div>
     </div>
   `;
   document.body.appendChild(modal);
@@ -5476,7 +5624,7 @@ async function loadDocs() {
   const map = d.map ? `<div class="card"><b>Components</b>
       <span class="muted">— derived ${ago(d.map.generatedAt)}, so it cannot disagree with the code</span>
       <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px">
-        ${d.map.nodes.map(n => `<div style="border:1px solid var(--border,#ddd);border-radius:6px;padding:8px 10px;min-width:120px">
+        ${d.map.nodes.map(n => `<div style="border:1px solid var(--border,#ddd);border-radius:0;padding:8px 10px;min-width:120px">
           <div><b>${esc(n.label)}</b> <span class="muted">${n.count}</span></div>
           <div class="muted" style="font-size:var(--fs-caption)">${esc(n.what || '')}</div></div>`).join('')}
       </div>
@@ -5615,9 +5763,9 @@ function renderDeclaredPipeline(mermaid) {
   const name = (id) => id.replace(/_/g, '-');
   return `<div style="margin-top:10px;font-size:var(--fs-small)">${edges.map(e => `
     <div style="display:flex;align-items:center;gap:8px;padding:3px 0">
-      <span style="border:1px solid var(--border,#ddd);border-radius:4px;padding:2px 8px">${esc(name(e.from))}</span>
+      <span style="border:1px solid var(--border,#ddd);border-radius:0;padding:2px 8px">${esc(name(e.from))}</span>
       <span class="muted">${e.join ? '⋯ join ⋯' : (e.gate ? `→ ${esc(e.gate)} →` : '→')}</span>
-      <span style="border:1px solid var(--border,#ddd);border-radius:4px;padding:2px 8px">${esc(name(e.to))}</span>
+      <span style="border:1px solid var(--border,#ddd);border-radius:0;padding:2px 8px">${esc(name(e.to))}</span>
     </div>`).join('')}</div>`;
 }
 
@@ -6242,12 +6390,71 @@ function renderDegradedBanner(id, reason, headline) {
 /** True when any project-scoped read failed — used to suppress "all clear" claims. */
 function anyDegraded() { return Object.keys(BOARD_DEGRADED).length > 0; }
 
+/**
+ * The project the server actually served, when it is not the one that was asked
+ * for. Null the rest of the time.
+ *
+ * `?project=<unknown>` falls back to the server's own directory and returns that
+ * project's numbers — 242 tasks, $2.70, eighteen scores — byte-identical to a
+ * real answer. The server has announced this since the BH-5 fix, in
+ * `X-Project-Fallback`, and until now NOTHING IN THIS FILE READ THAT HEADER:
+ * the announcement went to a channel with no listener, which is the same defect
+ * as not announcing it, one layer further from where anyone would look.
+ *
+ * This is worse than the degraded case beside it. Degraded means a panel could
+ * not be read and shows empty. This means every panel was read correctly, for
+ * somebody else. For an operator running eighteen projects a mistyped or stale
+ * slug — a bookmark, a shared link, a project dropped from the registry — puts
+ * another client's spend on screen with nothing to distinguish it.
+ */
+let PROJECT_FALLBACK = null;
+
+/** Announce, or clear, "these are not the numbers you asked for". */
+function renderProjectFallbackBanner() {
+  const id = 'project-fallback-banner';
+  const existing = document.getElementById(id);
+  if (!PROJECT_FALLBACK) { if (existing) existing.remove(); return; }
+  const { requested, serving } = PROJECT_FALLBACK;
+  const el = existing || document.createElement('div');
+  el.id = id;
+  el.className = 'degraded-banner project-fallback-banner';
+  el.setAttribute('role', 'alert');
+  // Both names, always. "Project not found" would send the operator looking for
+  // a missing project; the thing they need to know is whose figures they have
+  // been reading while they looked.
+  el.innerHTML = `<strong>${esc(requested)} was not found</strong>`
+    + `<span>Every panel below is showing <strong>${esc(serving || 'another project')}</strong>`
+    + ` — the board fell back to its own directory. Pick a project from the list to fix this.</span>`;
+  if (!existing) {
+    const host = document.querySelector('.workspace')
+      || (document.getElementById('kanban-board') || {}).parentNode;
+    if (host) host.insertBefore(el, host.firstChild);
+  }
+}
+
 function api(url, opts) {
   const key = String(url).split('?')[0];
   return fetch(url, opts).then(r => {
     const d = r.headers && r.headers.get('X-Board-Degraded');
     if (d) { try { BOARD_DEGRADED[key] = decodeURIComponent(d); } catch { BOARD_DEGRADED[key] = d; } }
     else delete BOARD_DEGRADED[key];
+    // Read on EVERY response, not once at boot: the operator switches projects
+    // without a reload, so a banner raised by one slug has to come down when the
+    // next one resolves. Driven by `X-Project-Resolved`, which is present on
+    // every response — keying off the absence of X-Project-Fallback alone would
+    // leave the banner up forever against a server too old to send either.
+    if (r.headers) {
+      const resolved = r.headers.get('X-Project-Resolved');
+      if (resolved === 'fallback') {
+        PROJECT_FALLBACK = {
+          requested: (new URL(String(url), location.origin)).searchParams.get('project') || '(unnamed)',
+          serving: r.headers.get('X-Project-Serving') || '',
+        };
+      } else if (resolved) {
+        PROJECT_FALLBACK = null;
+      }
+      try { renderProjectFallbackBanner(); } catch { /* pre-DOM call */ }
+    }
     return r.json();
   }).catch(() => {
     // A request that never completed is the one case the degradation mechanism
@@ -7151,7 +7358,7 @@ function openSide(task) {
   const docsSec = docRefs.length ? `
     <div class="side-section"><div class="side-section-head">Documents</div>
       ${docRefs.map(p => `
-        <button onclick="openDocInSide('${esc(p)}')" style="display:flex;width:100%;gap:8px;align-items:center;text-align:left;background:var(--bg-muted);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin:4px 0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-small);color:inherit">
+        <button onclick="openDocInSide('${esc(p)}')" style="display:flex;width:100%;gap:8px;align-items:center;text-align:left;background:var(--bg-muted);border:1px solid var(--border);border-radius:0;padding:6px 10px;margin:4px 0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-small);color:inherit">
           <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(p)}</span>
           <span style="color:var(--text3)">open →</span>
         </button>`).join('')}
@@ -7572,7 +7779,7 @@ function renderLogDetail(log) {
   el.innerHTML = `
     <div class="log-detail-head">
       <h3>${esc(log.title)}</h3>
-      <div class="log-detail-meta">${esc(log.date)}${log.time ? ' at ' + esc(log.time) : ''}${log.duration ? ' · ' + esc(log.duration) : ''}${log.source === 'verdicts' ? ' · <span style="color:var(--accent)">auto-synthesized from verdicts</span>' : log.source === 'auto' ? ' · <span style="color:var(--accent)">auto-captured by SessionEnd hook</span>' : ''}</div>
+      <div class="log-detail-meta">${esc(log.date)}${log.time ? ' at ' + esc(log.time) : ''}${log.duration ? ' · ' + esc(log.duration) : ''}${log.source === 'verdicts' ? ' · <span style="color:var(--accent-text)">auto-synthesized from verdicts</span>' : log.source === 'auto' ? ' · <span style="color:var(--accent-text)">auto-captured by SessionEnd hook</span>' : ''}</div>
     </div>
     <div class="log-section">
       <div class="log-section-label">Done</div>
@@ -8303,7 +8510,7 @@ function renderNotifDrawer() {
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(n.title)}</div>
           <div style="font-size:var(--fs-small);color:var(--text3);margin-top:2px;line-height:1.4">${esc(n.body)}</div>
           <div style="font-size:var(--fs-caption);color:var(--text3);margin-top:4px;font-family:var(--mono)">
-            ${n.project ? `<span style="color:var(--accent);margin-right:6px">${esc(n.project)}</span>` : ''}
+            ${n.project ? `<span style="color:var(--accent-text);margin-right:6px">${esc(n.project)}</span>` : ''}
             ${new Date(n.ts).toLocaleString()}
           </div>
         </div>
@@ -8481,8 +8688,7 @@ if (_costLbl) _costLbl.textContent = `Cost · last ${periodLabel(currentPeriod)}
 <div id="notif-drawer" style="position:fixed;top:0;right:-400px;width:380px;height:100vh;
   background:var(--bg-elevated);border-left:1px solid var(--border);z-index:9999;
   transition:right .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
-  box-shadow:-4px 0 32px rgba(0,0,0,.5)">
-  <div style="padding:14px 16px;border-bottom:1px solid var(--border);
+  box-shadow: none;border-bottom:1px solid var(--border);
     display:flex;align-items:center;gap:8px;flex-shrink:0">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
       style="width:16px;height:16px;color:var(--text2)">