From df954b300e3775b4952ab920186c33921e742eeb Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 03:29:42 +1100
Subject: [PATCH 1/2] fix(trending): agree the spark's mention count with its
 noun

The board passed one fixed plural, "mentions in 7 days", so a Skill
with one post read "1 mentions". sparkCount in shared/braille-spark.ts
now picks the noun from the count, and BrailleSpark takes the window
as a separate period. Both the visible count and the screen reader
label use it.

A day with no mentions now draws the lowest bar at 40% opacity as a
track. Plain text keeps the blank cell. With blank cells, a week with
one post was one bar floating in a gap before its label.
---
 app/components/BrailleSpark.vue               | 42 ++++++++++++++-----
 .../app/components/TrendingBoardItem.vue      |  2 +-
 shared/braille-spark.ts                       | 20 +++++++++
 test/a11y.spec.ts                             | 11 +++++
 test/unit/braille-spark.test.ts               | 18 +++++++-
 5 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/app/components/BrailleSpark.vue b/app/components/BrailleSpark.vue
index 31baf383..46f3e896 100644
--- a/app/components/BrailleSpark.vue
+++ b/app/components/BrailleSpark.vue
@@ -1,37 +1,49 @@
 <script setup lang="ts">
-import { brailleSpark, sparkWeek } from '#shared/braille-spark'
+import type { SparkUnit } from '#shared/braille-spark'
+import { SPARK_BARS, SPARK_MENTIONS, sparkCount, sparkLevels, sparkWeek } from '#shared/braille-spark'
 
 /**
  * Seven days of counts as seven braille bars, today in rose, with the count
  * beside them. The bars are text from `shared/braille-spark.ts`, so the weekly
  * email and any plain-text surface print the same spark.
+ *
+ * A day with no count draws the lowest bar faintly, as a track. Plain text
+ * leaves that day blank, and on the page a week with one post became one bar
+ * floating in a gap, with nothing to say it was a week.
  */
 const {
   counts,
   total,
-  unit = 'mentions',
+  unit = SPARK_MENTIONS,
+  period,
   showUnit = true,
 } = defineProps<{
   /** Seven daily counts, oldest first, today last. */
   counts: readonly number[]
   /** The count beside the bars. Defaults to the sum of the seven days. */
   total?: number
-  /** What is counted, as a plural noun. The screen reader label always names it. */
-  unit?: string
+  /** What is counted, in both forms. The screen reader label always names it. */
+  unit?: SparkUnit
+  /** The window the count covers, such as `in 7 days`. It follows the noun. */
+  period?: string
   /** Show the unit after the count. Hide it only where a column heading names it. */
   showUnit?: boolean
 }>()
 
 const week = computed(() => sparkWeek(counts))
-const bars = computed(() => [...brailleSpark(counts)])
+const cells = computed(() => sparkLevels(counts).map(level => ({
+  glyph: SPARK_BARS[level === 0 ? 1 : level],
+  empty: level === 0,
+})))
 const shown = computed(() => total ?? week.value.reduce((sum, count) => sum + count, 0))
-const totalText = computed(() => showUnit ? `${shown.value.toLocaleString('en-US')} ${unit}` : shown.value.toLocaleString('en-US'))
-const label = computed(() => `${shown.value.toLocaleString('en-US')} ${unit}. Per day, oldest first: ${week.value.join(', ')}. Today: ${week.value.at(-1)}.`)
+const counted = computed(() => [sparkCount(shown.value, unit), period].filter(Boolean).join(' '))
+const totalText = computed(() => showUnit ? counted.value : shown.value.toLocaleString('en-US'))
+const label = computed(() => `${counted.value}. Per day, oldest first: ${week.value.join(', ')}. Today: ${week.value.at(-1)}.`)
 </script>
 
 <template>
   <span class="braille-spark" role="img" :aria-label="label">
-    <span class="braille-spark__bars" aria-hidden="true">{{ bars.slice(0, -1).join('') }}<span class="braille-spark__today">{{ bars.at(-1) }}</span></span>
+    <span class="braille-spark__bars" aria-hidden="true"><span v-for="(cell, index) in cells" :key="index" :class="cell.empty ? 'braille-spark__track' : index === cells.length - 1 && 'braille-spark__today'">{{ cell.glyph }}</span></span>
     <span class="braille-spark__total" aria-hidden="true">{{ totalText }}</span>
   </span>
 </template>
@@ -39,8 +51,8 @@ const label = computed(() => `${shown.value.toLocaleString('en-US')} ${unit}. Pe
 <style scoped>
 .braille-spark {
   display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: baseline;
+  gap: 0.375rem;
   font-family: var(--font-mono);
   font-size: 0.75rem;
   color: var(--ui-text-muted);
@@ -53,11 +65,19 @@ const label = computed(() => `${shown.value.toLocaleString('en-US')} ${unit}. Pe
   font-family: 'IBM Plex Mono', 'DejaVu Sans Mono', 'Apple Braille', 'Segoe UI Symbol', ui-monospace, monospace;
   font-size: 0.875rem;
   line-height: 1;
-  letter-spacing: 0.04em;
   /* Muted, not dimmed: the bars are a graphic and need 3:1 against the surface. */
   color: var(--ui-text-muted);
 }
 
+/*
+ * The track is not data: it only shows where the week runs, and the label
+ * carries the count. A fraction of the bar colour, not the dimmed token: in
+ * dark mode dimmed sits within a step of muted, and a quiet day read as none.
+ */
+.braille-spark__track {
+  opacity: 0.4;
+}
+
 .braille-spark__today {
   color: var(--brand-dot);
 }
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index d4c55fcf..fb79cdcd 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -69,7 +69,7 @@ const mentions = computed(() => {
           >
           <span v-if="row.subtitle" class="truncate">{{ row.subtitle }}</span>
           <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
-          <BrailleSpark v-if="mentions" :counts="mentions" unit="mentions in 7 days" />
+          <BrailleSpark v-if="mentions" :counts="mentions" period="in 7 days" />
           <TrendingStarSpark v-else-if="!isSocial" :points="row.starSeries" />
           <template v-if="row.reason._tag === 'reviewed'">
             <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
diff --git a/shared/braille-spark.ts b/shared/braille-spark.ts
index 6275d946..19e02f5e 100644
--- a/shared/braille-spark.ts
+++ b/shared/braille-spark.ts
@@ -47,3 +47,23 @@ export function sparkLevels(counts: readonly number[]): number[] {
 export function brailleSpark(counts: readonly number[]): string {
   return sparkLevels(counts).map(level => SPARK_BARS[level]).join('')
 }
+
+/** What a spark counts, in both forms, because English plurals are not always `+s`. */
+export interface SparkUnit {
+  /** The noun after a count of exactly one, such as `mention`. */
+  one: string
+  /** The noun after every other count, zero included, such as `mentions`. */
+  other: string
+}
+
+/** Social mentions, the unit a spark counts unless told otherwise. */
+export const SPARK_MENTIONS: SparkUnit = { one: 'mention', other: 'mentions' }
+
+/**
+ * The count beside the bars, with the noun in agreement: `1 mention`,
+ * `2 mentions`, `1,204 mentions`. The trending board once printed
+ * "1 mentions", because its unit was one fixed plural string.
+ */
+export function sparkCount(count: number, unit: SparkUnit = SPARK_MENTIONS): string {
+  return `${count.toLocaleString('en-US')} ${count === 1 ? unit.one : unit.other}`
+}
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index 2922b0aa..4ffa5166 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -465,6 +465,17 @@ describe('accessibility: components', () => {
     wrapper.unmount()
   })
 
+  it('brailleSpark says one mention in the singular, on the page and to a screen reader', async () => {
+    const container = createIsolatedContainer()
+    const wrapper = await mountSuspended(
+      await loadComponent('BrailleSpark'),
+      { attachTo: container, props: { counts: [0, 0, 0, 1, 0, 0, 0], period: 'in 7 days' } },
+    )
+    expect(container.querySelector('.braille-spark__total')?.textContent).toBe('1 mention in 7 days')
+    expect(container.querySelector('[role="img"]')?.getAttribute('aria-label')).toMatch(/^1 mention in 7 days\. /)
+    wrapper.unmount()
+  })
+
   it('trendingMark has no violations and stays out of the accessibility tree', async () => {
     const container = createIsolatedContainer()
     const wrapper = await mountSuspended(
diff --git a/test/unit/braille-spark.test.ts b/test/unit/braille-spark.test.ts
index 44273dfa..a6cd7abe 100644
--- a/test/unit/braille-spark.test.ts
+++ b/test/unit/braille-spark.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { brailleSpark, sparkLevels, sparkWeek } from '../../shared/braille-spark'
+import { brailleSpark, sparkCount, sparkLevels, sparkWeek } from '../../shared/braille-spark'
 
 const BLANK = '⠀'
 
@@ -37,3 +37,19 @@ describe('braille spark', () => {
     expect([...brailleSpark([5])]).toHaveLength(7)
   })
 })
+
+describe('spark count', () => {
+  it.each([
+    { count: 1, text: '1 mention' },
+    { count: 0, text: '0 mentions' },
+    { count: 2, text: '2 mentions' },
+    { count: 1204, text: '1,204 mentions' },
+  ])('labels $count as "$text"', ({ count, text }) => {
+    expect(sparkCount(count)).toBe(text)
+  })
+
+  it('agrees with the count for any other unit', () => {
+    const posts = { one: 'post', other: 'posts' }
+    expect([sparkCount(1, posts), sparkCount(3, posts)]).toEqual(['1 post', '3 posts'])
+  })
+})

From cd25620f2e16f1d281cddc81b6dea8fbf55c1506 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 03:29:51 +1100
Subject: [PATCH 2/2] style(trending): tidy board rows, post cards and the
 sidebar rail

Harlan found the trending board messy. Rows were tall and did not scan:
dotted rank glyphs, three-line descriptions, a run chip as wide as the
column, and a second post card cut off at the board's edge.

- Ranks are plain tabular mono numbers on the name's baseline. The
  first three are a step darker, and none is rose.
- Each metadata line runs source, stars, then the signal that ranked
  the row. An empty slot renders nothing, and a long repository name is
  cut short before it pushes the signal to a second line.
- Descriptions stop at two lines, and the run chip is as wide as its
  command.
- The post carousel shows whole cards only: one, or two where it has
  room. The pager ends on the cards' right edge.
- The sidebar invitation drops the email preview and its card. Its
  button is the rail's one solid rose element, so the install chip
  inks its dot while the invitation shows.
---
 DESIGN.md                                     |   3 +-
 app/components/SkilldInstallChip.vue          |   5 +-
 app/components/_CommandChip.vue               |  12 ++
 .../app/components/TrendingBoardItem.vue      | 167 +++++++++++-------
 .../app/components/TrendingPostCarousel.vue   |  25 +--
 .../app/components/TrendingWeeklyCta.vue      |  60 ++++---
 .../marketing/app/pages/skills/trending.vue   |   5 +-
 7 files changed, 173 insertions(+), 104 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 6698a7f9..25adb52c 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -347,7 +347,7 @@ Motifs carry data. Each answers one pitch line from `COPY.md` and spends one ros
 
 **Run chip.** It pairs with "No more skill bloat". Run and install sit side by side, and run is preselected. Run has a dashed border and a hollow rose dot, because nothing stays. Install has a solid border and a filled dot, because files land. A consequence line under the chip says what each choice leaves on disk.
 
-**Braille spark.** It pairs with "Stay hyped". Seven braille bars (`⣀⣤⣶⣿`) show seven days of social mentions, with today in rose. The mention count sits beside it. The spark is made of characters, so the same line works on the site, in the weekly email, in Discord and in a terminal. It replaces the trending flame emoji.
+**Braille spark.** It pairs with "Stay hyped". Seven braille bars (`⣀⣤⣶⣿`) show seven days of social mentions, with today in rose. The mention count sits beside it, with its noun from `sparkCount`, so one mention reads "1 mention". On the site, a day with no mentions draws the lowest bar at 40% opacity as a track, so a lone bar still reads as one day of seven. Plain text keeps the blank cell. The spark is made of characters, so the same line works on the site, in the weekly email, in Discord and in a terminal. It replaces the trending flame emoji.
 
 **Change grid.** It pairs with "Keep updated". A 13-week grid of days, today at the bottom right. Each change is a stone dot, and the newest change is rose. A ring around a dot shows the size of the version bump, only where a version is known.
 
@@ -459,3 +459,4 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **The braille spark replaces the trending flame**: seven braille bars for seven days of mentions, today in rose. The emoji exception for Trending is retired. The spark keeps the sourced mention count beside it, which the flame never carried. Confirmed 2026-10-06.
 - **Run and install read as different materials**: run is a dashed border with a hollow dot, because nothing stays; install is a solid border with a filled dot, because files land. Run is preselected. Confirmed 2026-10-06.
 - **Trending shares the /skills shell**: `/skills/trending` uses the full-width layout from `/skills`. Its heading replaces `CompactPageHeader` and lines up with the results column. A sticky 14rem sidebar holds the range links, then the weekly CTA and the skilld install. Nothing sits right of the board, so the board takes every column the sidebar leaves. Rows switch on their own width, and the post carousel shows two cards where it has room. On narrow screens the ranges are a compact row above the board, and the CTA stays after the fifth row. Harlan asked for this on 2026-10-06. It supersedes the 2026-10-01 call that dropped the 9/3 sidebar for taking a quarter of the board's width: that sidebar sat right of a 64rem board, and this one sits left of a board that runs the full page width.
+- **Trending rows scan in one pass**: the rank is a plain mono number, and the first three are a step darker. Each metadata line runs source, stars, then the signal that ranked the row, and an empty slot renders nothing. Descriptions stop at two lines, the run chip is as wide as its command, and the post carousel shows whole cards only. The sidebar invitation drops the email preview and the card. Its button is the rail's one solid rose element, so the install chip beside it inks its dot. Harlan asked for this polish on 2026-10-06.
diff --git a/app/components/SkilldInstallChip.vue b/app/components/SkilldInstallChip.vue
index 6977183d..f1dfdc72 100644
--- a/app/components/SkilldInstallChip.vue
+++ b/app/components/SkilldInstallChip.vue
@@ -8,9 +8,11 @@ import CommandChip from './_CommandChip.vue'
  * installs the skilld-maintained skilld Skill globally, so the Agent can
  * drive the CLI in every project.
  */
-const { surface } = defineProps<{
+const { surface, quiet = false } = defineProps<{
   /** The analytics surface, such as `nav-promo`. */
   surface: string
+  /** Ink the dot instead of rose, where a solid rose button shares the band. */
+  quiet?: boolean
 }>()
 
 const command = skilldSelfInstallCmd()
@@ -25,6 +27,7 @@ const consequenceId = useId()
       :command="command"
       mode="install"
       size="sm"
+      :quiet="quiet"
       :surface="surface"
       :target="target"
       :described-by="consequenceId"
diff --git a/app/components/_CommandChip.vue b/app/components/_CommandChip.vue
index 4ff0466d..e340b8f7 100644
--- a/app/components/_CommandChip.vue
+++ b/app/components/_CommandChip.vue
@@ -17,6 +17,7 @@ const {
   surface,
   target,
   size = 'md',
+  quiet = false,
   copyLabel,
   describedBy,
 } = defineProps<{
@@ -27,6 +28,8 @@ const {
   surface: string
   target: InstallTarget
   size?: 'md' | 'sm'
+  /** Ink the dot instead of rose, where another element already spends the band's rose. */
+  quiet?: boolean
   copyLabel?: string
   /** The id of the text that says what the command does. */
   describedBy?: string
@@ -89,6 +92,7 @@ async function onCopy() {
     :class="[
       `command-chip--${mode}`,
       `command-chip--${size}`,
+      quiet && 'command-chip--quiet',
       marching && 'command-chip--march',
     ]"
   >
@@ -215,6 +219,14 @@ async function onCopy() {
   background-color: var(--brand-dot);
 }
 
+.command-chip--quiet .command-chip__dot {
+  border-color: var(--ui-text-muted);
+}
+
+.command-chip--quiet.command-chip--install .command-chip__dot {
+  background-color: var(--ui-text-muted);
+}
+
 .command-chip__command {
   flex: 1 1 auto;
   min-width: 0;
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index fb79cdcd..f18bbc39 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -40,6 +40,8 @@ const mentions = computed(() => {
   const days = row.reason._tag === 'posts' ? row.reason.mentionsByDay : null
   return days?.some(count => count > 0) ? days : null
 })
+/** Whether the last slot of the metadata line has anything to say. */
+const hasSignal = computed(() => !isSocial.value || mentions.value !== null)
 </script>
 
 <template>
@@ -56,34 +58,46 @@ const mentions = computed(() => {
         <NuxtLink :to="row.to" class="board-row__name">
           {{ row.title }}
         </NuxtLink>
+        <!--
+          Three slots in one order on every row: where the Skill lives, its
+          stars, then why it is on the board. A slot with nothing to say
+          renders nothing, and the last slot drops to its own line as a whole
+          when the row is too narrow for all three.
+        -->
         <p class="board-row__meta">
-          <img
-            :src="githubAvatarProxyUrl(row.owner, 40)"
-            alt=""
-            width="18"
-            height="18"
-            class="size-[1.125rem] shrink-0 rounded-full border border-default bg-muted"
-            loading="lazy"
-            decoding="async"
-            @error="emit('avatarError', row.owner)"
-          >
-          <span v-if="row.subtitle" class="truncate">{{ row.subtitle }}</span>
-          <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
-          <BrailleSpark v-if="mentions" :counts="mentions" period="in 7 days" />
-          <TrendingStarSpark v-else-if="!isSocial" :points="row.starSeries" />
-          <template v-if="row.reason._tag === 'reviewed'">
-            <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
-            <span v-if="row.reason.updated" class="shrink-0">Updated {{ row.reason.updated }}</span>
-          </template>
-          <!--
-            The two reasons with no post say why the row is here in words, since
-            nothing beside them does. A surge has only its stars; filler has to
-            say it is filler, or a popular repository passes for a trending one.
-          -->
-          <span v-else-if="row.reason._tag === 'surge'" class="shrink-0 text-default">
-            {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
+          <span class="board-row__source">
+            <img
+              :src="githubAvatarProxyUrl(row.owner, 40)"
+              alt=""
+              width="18"
+              height="18"
+              class="size-[1.125rem] shrink-0 rounded-full border border-default bg-muted"
+              loading="lazy"
+              decoding="async"
+              @error="emit('avatarError', row.owner)"
+            >
+            <span v-if="row.subtitle" class="truncate" :title="row.subtitle">{{ row.subtitle }}</span>
+          </span>
+          <span v-if="row.stars" class="board-row__stars">
+            <span>{{ `${row.stars.toLocaleString()} ★` }}</span>
+            <TrendingStarSpark v-if="!isSocial" :points="row.starSeries" />
+          </span>
+          <span v-if="hasSignal" class="board-row__signal">
+            <BrailleSpark v-if="mentions" :counts="mentions" period="in 7 days" />
+            <template v-else-if="row.reason._tag === 'reviewed'">
+              <span>{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
+              <span v-if="row.reason.updated">Updated {{ row.reason.updated }}</span>
+            </template>
+            <!--
+              The two reasons with no post say why the row is here in words, since
+              nothing beside them does. A surge has only its stars; filler has to
+              say it is filler, or a popular repository passes for a trending one.
+            -->
+            <span v-else-if="row.reason._tag === 'surge'" class="board-row__surge">
+              {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
+            </span>
+            <span v-else-if="row.reason._tag === 'filler'">Popular on GitHub</span>
           </span>
-          <span v-else-if="row.reason._tag === 'filler'" class="shrink-0">Popular on GitHub</span>
         </p>
         <p v-if="row.description" class="board-row__description">
           {{ row.description }}
@@ -127,11 +141,11 @@ const mentions = computed(() => {
  */
 .board-row {
   display: grid;
-  grid-template-columns: 2.25rem minmax(0, 1fr);
+  grid-template-columns: 1.5rem minmax(0, 1fr);
   column-gap: 0.75rem;
   row-gap: 1rem;
   align-items: start;
-  padding-block: 1.5rem;
+  padding-block: 1.25rem;
 }
 
 .board-row__skill,
@@ -141,27 +155,27 @@ const mentions = computed(() => {
 }
 
 /*
- * Printed in the dot grid, at a size where the dots read as a number. Stone,
- * not rose: stone dots are the noise, and the rose belongs to the motifs
- * beside it, one dot each.
+ * A plain number, quiet beside the name it ranks. It shares the name's
+ * baseline, so the two read as one line. The first three are inked a step
+ * darker, never in rose: the rose belongs to the motifs, one dot each.
  */
+.board-row__rank,
+.board-row__skill {
+  grid-row: 1;
+  align-self: baseline;
+}
+
 .board-row__rank {
-  grid-row: 1 / span 2;
-  padding-top: 0.125rem;
   font-family: var(--font-mono);
-  font-size: 1.375rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.02em;
+  font-size: 0.875rem;
+  line-height: 1.3;
   font-variant-numeric: tabular-nums;
-  color: var(--ui-text);
-  opacity: 0.45;
-  mask-image: radial-gradient(circle, #000 1.1px, transparent 1.4px);
-  mask-size: 3px 3px;
+  color: var(--ui-text-muted);
 }
 
 .board-row__rank--lead {
-  opacity: 1;
+  font-weight: 600;
+  color: var(--ui-text-highlighted);
 }
 
 .board-row__name {
@@ -184,61 +198,90 @@ const mentions = computed(() => {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem 0.625rem;
+  gap: 0.25rem 0.75rem;
   min-inline-size: 0;
   margin-top: 0.375rem;
   font-family: var(--font-mono);
   font-size: 0.75rem;
+  line-height: 1.125rem;
   color: var(--ui-text-muted);
 }
 
-.board-row__run {
-  max-inline-size: 30rem;
-  margin-top: 0.875rem;
+/*
+ * The source line breaks as if it were 11rem wide, then grows back to its full
+ * length where the line has room. So a long repository name gets cut short
+ * before it pushes the stars or the signal onto a line of their own.
+ */
+.board-row__source {
+  display: inline-flex;
+  flex: 1 1 11rem;
+  align-items: center;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  max-inline-size: max-content;
+}
+
+.board-row__stars {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.5rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.board-row__signal {
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  min-inline-size: 0;
+  white-space: nowrap;
+}
+
+.board-row__surge {
+  white-space: normal;
+  color: var(--ui-text);
 }
 
 /* Capped for rows with no posts, which otherwise run the whole board wide. */
 .board-row__description {
   display: -webkit-box;
   max-inline-size: 75ch;
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
   overflow: hidden;
-  font-size: 0.9375rem;
-  line-height: 1.6;
+  font-size: 0.875rem;
+  line-height: 1.55;
   color: var(--ui-text-muted);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
 }
 
+/* As wide as its command, not as wide as the column. */
+.board-row__run {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  margin-top: 0.75rem;
+}
+
 /*
  * Beside the Skill once the row is wide enough for both. The posts take what
  * the board has to spare, and the Skill column stays the wider one.
  */
 @container board-item (min-width: 52rem) {
   .board-row {
-    grid-template-columns: 3rem minmax(0, 1fr);
     column-gap: 2rem;
   }
 
   .board-row--with-posts {
-    grid-template-columns: 3rem minmax(0, 1.25fr) minmax(21rem, 1fr);
-  }
-
-  .board-row__rank {
-    grid-row: 1;
-    font-size: 1.5rem;
+    grid-template-columns: 1.5rem minmax(0, 1.25fr) minmax(21rem, 1fr);
   }
 
   .board-row__posts {
     grid-column: 3;
     grid-row: 1;
   }
-
-  /* Beside the posts there is room for a third line of the author's own words. */
-  .board-row__description {
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-  }
 }
 </style>
diff --git a/layers/marketing/app/components/TrendingPostCarousel.vue b/layers/marketing/app/components/TrendingPostCarousel.vue
index d3e3dc3f..e53071e2 100644
--- a/layers/marketing/app/components/TrendingPostCarousel.vue
+++ b/layers/marketing/app/components/TrendingPostCarousel.vue
@@ -12,8 +12,9 @@ import TrendingPostCard from './TrendingPostCard.vue'
  * does the work, so every post is in the server HTML, a touch screen swipes
  * it, and focus on a card scrolls that card into view.
  *
- * The next card peeks in from the edge, which is what says there is more.
- * Where the carousel is wide enough, two cards show at once.
+ * Only whole cards show: one, or two where the carousel is wide enough. A
+ * second card cut off at the board's edge read as a broken layout, not as
+ * more to come, so the count under the cards says how many there are.
  */
 const { posts, names, label } = defineProps<{
   posts: readonly TrendingPost[]
@@ -112,25 +113,23 @@ function move(by: number) {
 
 .post-carousel__slide {
   display: flex;
-  flex: 0 0 88%;
+  flex: 0 0 100%;
   min-inline-size: 0;
   scroll-snap-align: start;
 }
 
-.post-carousel__slide--only {
-  flex-basis: 100%;
-}
-
 .post-carousel__slide > * {
   flex: 1;
 }
 
+/* Under the cards, ending on their right edge. The negative margin takes back the chevron's padding. */
 .post-carousel__nav {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.125rem;
   margin-top: 0.375rem;
+  margin-inline-end: -0.25rem;
 }
 
 .post-carousel__count {
@@ -143,13 +142,17 @@ function move(by: number) {
 
 /*
  * Two cards at a time once a card would otherwise stretch past a readable
- * line. They grow to fill the track when only one or two exist, and a third
- * still peeks in from the edge. Two posts side by side leave nothing to step
- * through, so they show no controls.
+ * line, each exactly half the track less the gap, so the second ends on the
+ * track's edge. A lone post takes the whole track. Two posts side by side
+ * leave nothing to step through, so they show no controls.
  */
 @container (min-width: 36rem) {
   .post-carousel__slide {
-    flex: 1 0 46%;
+    flex-basis: calc((100% - 0.5rem) / 2);
+  }
+
+  .post-carousel__slide--only {
+    flex-basis: 100%;
   }
 
   .post-carousel:has(.post-carousel__slide:nth-child(2):last-child) .post-carousel__nav {
diff --git a/layers/marketing/app/components/TrendingWeeklyCta.vue b/layers/marketing/app/components/TrendingWeeklyCta.vue
index 7570fa4a..392e70ca 100644
--- a/layers/marketing/app/components/TrendingWeeklyCta.vue
+++ b/layers/marketing/app/components/TrendingWeeklyCta.vue
@@ -11,7 +11,14 @@ import { useElementVisibility } from '@vueuse/core'
  * A plain block, not an `<aside>`: the board renders it twice, in the sidebar
  * and between the board's halves, and one of them is always hidden. Two
  * complementary landmarks with the same name failed HTML validation.
+ *
+ * `rail` is the sidebar copy: the heading and the button, with no preview and
+ * no card. In a 14rem column the email shrank past reading, and a framed box
+ * with a picture, a heading and a button outweighed the range links above it.
  */
+const { variant = 'card' } = defineProps<{
+  variant?: 'card' | 'rail'
+}>()
 
 /**
  * The email loads in the browser, and only for the copy a reader can see.
@@ -50,9 +57,9 @@ const previewDocument = computed(() => card.value
 </script>
 
 <template>
-  <div class="trending-weekly-cta">
+  <div class="trending-weekly-cta" :class="`trending-weekly-cta--${variant}`">
     <div
-      v-if="keepPreviewBox"
+      v-if="variant === 'card' && keepPreviewBox"
       ref="preview"
       class="trending-weekly-preview"
       inert
@@ -82,7 +89,8 @@ const previewDocument = computed(() => card.value
         to="/login"
         label="Sign in with GitHub"
         icon="i-lucide-github"
-        class="trending-weekly-action min-h-11 w-full justify-center"
+        :size="variant === 'rail' ? 'sm' : 'md'"
+        class="trending-weekly-action w-full justify-center"
       />
     </div>
   </div>
@@ -90,8 +98,10 @@ const previewDocument = computed(() => card.value
 
 <style scoped>
 .trending-weekly-cta {
-  container-type: inline-size;
   min-inline-size: 0;
+}
+
+.trending-weekly-cta--card {
   overflow: clip;
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius);
@@ -117,45 +127,41 @@ const previewDocument = computed(() => card.value
   transform-origin: top left;
 }
 
-.trending-weekly-copy {
-  padding: 1rem;
-}
-
 .trending-weekly-heading {
   font-size: 1rem;
 }
 
+.trending-weekly-cta--card .trending-weekly-copy {
+  padding: 1rem;
+}
+
 .trending-weekly-action {
+  min-block-size: 2.75rem;
   margin-top: 1.25rem;
 }
 
 /*
- * The sidebar column is narrower than any phone. The copy tightens there so
- * the button keeps its whole label on one line rather than truncating it.
+ * Set like the sidebar's own headings, so the invitation reads as one more
+ * section of the rail. The button keeps its whole label in the 14rem column.
  */
-@container (max-width: 16rem) {
-  .trending-weekly-copy {
-    padding: 0.75rem;
-  }
-
-  .trending-weekly-heading {
-    font-size: 0.9375rem;
-  }
+.trending-weekly-cta--rail .trending-weekly-heading {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 
-  .trending-weekly-action {
-    gap: 0.375rem;
-    padding-inline: 0.5rem;
-    font-size: 0.75rem;
-  }
+.trending-weekly-cta--rail .trending-weekly-action {
+  min-block-size: 2.25rem;
+  margin-top: 0.75rem;
+}
 
-  .trending-weekly-action :deep(.iconify) {
-    inline-size: 1rem;
-    block-size: 1rem;
+@media (pointer: coarse) {
+  .trending-weekly-cta--rail .trending-weekly-action {
+    min-block-size: 2.75rem;
   }
 }
 
 @media (forced-colors: active) {
-  .trending-weekly-cta {
+  .trending-weekly-cta--card {
     border-color: CanvasText;
   }
 }
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 7b0df39a..f5c4d099 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -473,13 +473,14 @@ const boardChunks = computed<BoardChunk[]>(() => [
               v-if="showWeeklyCta"
               :class="{ invisible: auth._tag === 'pending' }"
             >
-              <TrendingWeeklyCta />
+              <TrendingWeeklyCta variant="rail" />
             </div>
+            <!-- The weekly button is the rail's one solid rose element, so the install inks its dot while it shows. -->
             <div class="trending-teach">
               <p class="font-mono text-xs text-muted">
                 Teach your agent skilld
               </p>
-              <SkilldInstallChip surface="trending-sidebar" />
+              <SkilldInstallChip surface="trending-sidebar" :quiet="showWeeklyCta" />
             </div>
           </div>
         </div>