@bongos/core 1.19.449 → 1.19.451

package/modules/hall-ui/public/room.css

@@ -0,0 +1,441 @@
+/* room.css — the READING-ROOM archetype: a long document read end to end
+   (task 1003306, goal 1000081). Shared by the primer (primer.html) and the
+   diagrams index (diagrams.html).
+
+   THE ARCHETYPE is v3 "the glass hall", the owner's pick from the composition
+   round — docs/design/hall-direction-v2.md §6, mock
+   docs/design/mocks/hall/reading/v3.html. Reading order, top to bottom: a
+   progress hairline under the topbar; the room's name alone over the ground
+   (the shell's .page-head--room); then a GLASS table of contents beside a
+   --bg-card article card. The glass/card split is the composition's argument:
+   wayfinding is chrome and belongs to the same material as the rail and the
+   topbar, the document is content and belongs on a panel the ground can never
+   reach the ink on.
+
+   WHY IT IS ITS OWN SHEET rather than more of primer.css: the primer and the
+   diagrams index are the same room over different documents — one renders
+   markdown, one renders five figures — and the framed figure is literally the
+   same object on both (diagram-viewer.js upgrades `figure.diagram img,
+   figure.primer-figure img` with one selector). Ranks, Economy, Repo Atlas and
+   Modules inherit this archetype next. Page-specific shapes stay page-local:
+   primer.css keeps the acknowledge gate, diagrams.css keeps the legend strip.
+
+   WHY THE CLASSES ARE STILL `primer-`: two live surfaces spell them —
+   diagram-viewer.js's upgrade selector and tests/hall_audit.mjs's pinned
+   phone-overflow rule — so the sheet is named for the ROOM and the prefix is
+   left alone. Renaming would churn a JS selector and a pinned test to buy a
+   reader nothing.
+
+   THE PANEL IS THE SHELL'S. The article, the failure notes and the skeleton all
+   carry `.scroll` in their markup and this sheet only adds the reading padding:
+   v3 has exactly three card levels and a fourth is a design decision, not a
+   local override (modules/hall-ui/CLAUDE.md, Hard rules).
+
+   Everything below spends the world's real token names. No compat alias
+   (--surface / --surface-2 / --border / --border-strong / --accent-weak /
+   --accent-text) appears here — they exist for pages nobody has re-skinned, so
+   spending one is legal CSS that quietly opts this sheet back out of the world.
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. */
+
+/* ---- the room's composition tokens ---------------------------------------
+   On `body`, never in a page `:root`: the branding pack's :root is spliced at
+   the end of <head> at (0,1,0), so a page-local one is outranked one way and
+   defeats re-branding the other.
+   --measure is NOT redeclared. It is the shell's measured 48ch, and a `ch`
+   scales with the font size — so the same token renders the same ~60 characters
+   whether the room reads at 15px or 17px. Re-deriving it per page size is the
+   `ch` arithmetic that put 90 characters on this page in the first place. */
+body.room {
+  --room-gap:   var(--sp-lg);
+  --room-toc-w: 246px;
+  --room-pad:   clamp(24px, 3.4vw, 58px);
+  --room-size:  17px;
+  --room-lead:  1.75;
+  --room-h2:    clamp(24px, 2.8vw, 34px);
+  --room-h3:    20px;
+}
+
+/* ---- 1. the reading hairline --------------------------------------------
+   Sticky rather than fixed: it belongs to the content column, so it scrolls out
+   of the way with the head instead of hovering over the whole viewport. Under
+   the topbar in the z ladder (--z-progress < --z-topbar) for the same reason —
+   it is the article's progress, not app chrome. */
+.primer-progress {
+  position: sticky;
+  top: var(--topbar-h);
+  z-index: var(--z-progress);
+  height: 3px;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  pointer-events: none;
+}
+.primer-progress__bar {
+  height: 100%;
+  width: 0;
+  background: var(--accent);
+  transition: width 200ms cubic-bezier(.2, .7, .3, 1);
+}
+
+/* ---- 2. the reading column ----------------------------------------------
+   ONE ceiling for the room, on the room's own body scope. --content-max (1120)
+   is a working surface's width; a document read at it is more empty ground than
+   page. The cap sits on the room's main rather than on each page's wrapper so
+   the primer's two columns and the diagrams index's stacked figures end at the
+   same edge — a reading room that changes width between its own pages reads as
+   two different rooms.
+   This is the room's own composition, not a shell override: it is scoped to the
+   body class a page opts into, and it sets a measure, not shell layout (the
+   rule tests/hall_record_world.mjs pins is `.app-content > main`, which reaches
+   into the shell's grid for every page at once). */
+body.room #hall-main,
+body.room .page-head { max-width: var(--room-max); }
+
+.primer-layout {
+  display: grid;
+  grid-template-columns: var(--room-toc-w) minmax(0, 1fr);
+  gap: var(--room-gap);
+  align-items: start;
+  padding-bottom: var(--sp-md);
+}
+/* the article column, so the notes, the skeleton and the gate stack under the
+   card rather than beside the contents */
+.primer-col { min-width: 0; }
+
+/* ---- 3. the table of contents, as glass ---------------------------------- */
+
+.primer-toc {
+  position: sticky;
+  top: calc(var(--topbar-h) + var(--sp-md));
+  align-self: start;
+}
+.primer-toc__toggle {
+  display: none;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 44px;
+  padding: 8px 16px;
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur));
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+  font-family: var(--font-body);
+  font-size: 14.5px;
+  color: var(--ink);
+  cursor: pointer;
+}
+.primer-toc__chevron { transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
+.primer-toc__toggle[aria-expanded="true"] .primer-toc__chevron { transform: rotate(180deg); }
+.primer-toc__inner {
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur));
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
+}
+.primer-toc__heading {
+  margin: 0 0 var(--sp-sm);
+  padding: 0 var(--sp-xs);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
+.primer-toc__list li { margin: 0; }
+/* the numeral is a two-digit mono column, so a long list never re-spaces around
+   its tenth row the way an upper-roman VIII did */
+.primer-toc__list a {
+  display: flex;
+  align-items: baseline;
+  gap: 11px;
+  min-height: 34px;
+  padding: 8px var(--sp-xs);
+  border-left: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  text-decoration: none;
+  transition: color 200ms cubic-bezier(.2, .7, .3, 1);
+}
+.primer-toc__list a::before {
+  counter-increment: toc;
+  content: counter(toc, decimal-leading-zero);
+  flex: none;
+  font: 400 11px/1.4 var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.primer-toc__list a:hover { color: var(--ink); text-decoration: none; }
+.primer-toc__list a.is-active {
+  color: var(--ink);
+  background: var(--glass-strong);
+  border-left-color: var(--accent);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.primer-toc__list a.is-active::before { color: var(--ink-soft); }
+.primer-toc__placeholder {
+  padding: 8px var(--sp-xs);
+  font-size: 14px;
+  color: var(--ink-faint);
+}
+
+/* ---- 4. the article ------------------------------------------------------
+   The card itself is `.scroll`; this is the reading pad and the rhythm. */
+
+.primer-article {
+  padding: var(--room-pad);
+  margin: 0;
+  counter-reset: sec;
+  font-size: var(--room-size);
+  line-height: var(--room-lead);
+  color: var(--ink);
+}
+/* PROSE is measured; a table, a figure and a code block may take the whole card,
+   and that width is the only reason the card is wider than the measure. */
+.primer-article > p,
+.primer-article > ul,
+.primer-article > ol,
+.primer-article > blockquote,
+.primer-article > h2,
+.primer-article > h3 { max-width: var(--measure); }
+
+/* the document's own h1 is suppressed — the page head already names the room,
+   and a second h1 in <main> fails the one-header-main-h1 floor outright */
+.primer-article h1 { display: none; }
+
+.primer-article h2 {
+  margin: calc(var(--sp-xl) * 1.4) 0 var(--sp-md);
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: var(--room-h2);
+  line-height: 1.06;
+  letter-spacing: -0.035em;
+  color: var(--ink);
+  /* anchor jumps land below the sticky top bar AND its hairline */
+  scroll-margin-top: calc(var(--topbar-h) + 28px);
+}
+/* the section number sits above the headline rather than beside it, so a long
+   title stays one uninterrupted shape at every width */
+.primer-article h2::before {
+  counter-increment: sec;
+  content: counter(sec, decimal-leading-zero);
+  display: block;
+  margin-bottom: 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.primer-article > h2:first-child { margin-top: 0; }
+.primer-article h3 {
+  margin: var(--sp-lg) 0 var(--sp-xs);
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: var(--room-h3);
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  scroll-margin-top: calc(var(--topbar-h) + 28px);
+}
+
+.primer-article p { margin: 0 0 var(--sp-md); }
+.primer-article p:last-child { margin-bottom: 0; }
+/* the subtitle line at the very top of the document */
+.primer-article > p > em:only-child { color: var(--ink-soft); }
+
+.primer-article ul, .primer-article ol { margin: 0 0 var(--sp-lg); padding-left: 1.4em; }
+.primer-article li { margin: 0 0 12px; }
+.primer-article li:last-child { margin-bottom: 0; }
+.primer-article li::marker { color: var(--ink-faint); }
+
+/* 1px of vertical padding takes an inline link past the 24px floor without
+   costing the line its own leading (the .scroll__lede precedent, task 1003304) */
+.primer-article a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 1px 0;
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}
+.primer-article a:hover { color: var(--ink); }
+.primer-article strong { font-weight: 600; color: var(--ink); }
+.primer-article em { font-style: italic; }
+
+.primer-article code {
+  font: 400 .85em/1.4 var(--font-mono);
+  background: var(--glass);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.primer-article pre {
+  margin: 0 0 var(--sp-lg);
+  padding: var(--sp-md) var(--sp-lg);
+  overflow-x: auto;
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+}
+.primer-article pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: 13.5px;
+  line-height: 1.8;
+  color: var(--ink-soft);
+}
+
+/* blockquotes only render since task 1003306 unified the two markdown parsers —
+   primer.js had no blockquote rule at all and md-reader.js has always emitted
+   them, so the primer silently dropped every aside into a paragraph. */
+.primer-article blockquote {
+  margin: var(--sp-lg) 0;
+  padding: var(--sp-md) var(--sp-lg);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-left: 2px solid var(--rule);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  color: var(--ink-soft);
+}
+.primer-article blockquote p { margin: 0; max-width: var(--measure); }
+
+.primer-article hr {
+  border: none;
+  border-top: var(--line) solid var(--rule-soft);
+  margin: var(--sp-xl) 0;
+}
+
+.primer-article table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 var(--sp-lg);
+  font-size: 14.5px;
+  font-variant-numeric: tabular-nums;
+}
+.primer-article th, .primer-article td {
+  text-align: left;
+  vertical-align: top;
+  padding: 13px 16px 13px 0;
+  border-bottom: var(--line) solid var(--rule-soft);
+}
+.primer-article th {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-article tr:last-child td { border-bottom: 0; }
+
+/* ---- 5. the framed figure ------------------------------------------------
+   ONE rule, both rooms: diagram-viewer.js upgrades `figure.diagram img,
+   figure.primer-figure img` into a pannable canvas, and until (or unless) the
+   SVG fetch succeeds the PNG stays in this frame. Glass rather than a card, so
+   a figure inside the article reads as inset and a figure on the diagrams index
+   reads as the same object. */
+.primer-figure, figure.diagram {
+  margin: var(--sp-xl) 0;
+  padding: var(--sp-lg) var(--sp-md);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+}
+.primer-figure:last-child, figure.diagram:last-child { margin-bottom: 0; }
+.primer-figure img, figure.diagram img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+/* diagram-viewer.js inserts its canvas INSIDE the figure and hides the <img>,
+   so the frame has to belong to exactly one of them or the diagram ends up in
+   two nested boxes. The figure keeps it; the canvas gives its own up. (Its
+   fullscreen state re-declares both, and diagram-viewer.css loads after this
+   sheet on both pages, so the overlay still paints.) */
+.primer-figure .dgv, figure.diagram .dgv {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+}
+.primer-figure figcaption, figure.diagram figcaption {
+  margin-top: 14px;
+  max-width: var(--measure);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink-faint);
+}
+
+/* ---- 6. the states before the document ----------------------------------
+   Each is the same card the article is, so the page never changes shape as it
+   resolves — the skeleton is the article's silhouette, not a spinner. */
+
+.primer-note, .primer-skeleton { padding: var(--room-pad); }
+.primer-note__label {
+  margin: 0 0 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-note--error .primer-note__label { color: var(--danger); }
+.primer-note__body { margin: 0 0 var(--sp-lg); max-width: var(--measure); color: var(--ink-soft); }
+.primer-note__body:last-child { margin-bottom: 0; }
+.primer-note__acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: 0; }
+
+.primer-sk {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--skeleton);
+}
+.primer-skeleton__h { height: 28px; width: 58%; margin-bottom: var(--sp-lg); }
+.primer-skeleton__p { margin-bottom: var(--sp-lg); max-width: var(--measure); }
+.primer-skeleton__p .primer-sk { margin-bottom: 15px; }
+.primer-skeleton__p .primer-sk:nth-child(2) { width: 96%; }
+.primer-skeleton__p .primer-sk:nth-child(3) { width: 99%; }
+.primer-skeleton__p .primer-sk:nth-child(4) { width: 84%; }
+.primer-skeleton__p .primer-sk:last-child { width: 46%; margin-bottom: 0; }
+.primer-skeleton__rule {
+  height: var(--line);
+  margin: var(--sp-xl) 0 var(--sp-lg);
+  background: var(--rule-soft);
+}
+
+/* ---- 7. the room's one breakpoint ---------------------------------------
+   760px, NOT the shell's 640: it is the width primer.js's matchMedia mirrors
+   and tests/hall_audit.mjs pins exactly. Narrowing it "for consistency" would
+   silently reopen the 641-760px band the table's scrollport exists to cover. */
+@media (max-width: 760px) {
+  body.room {
+    --room-gap:  0px;
+    --room-pad:  20px;
+    --room-size: 16.5px;
+    --room-lead: 1.7;
+    --room-h2:   24px;
+  }
+  .primer-layout { grid-template-columns: minmax(0, 1fr); }
+  .primer-toc { position: static; margin-bottom: var(--sp-sm); }
+  .primer-toc__toggle { display: flex; }
+  .primer-toc__inner { display: none; margin-top: 8px; }
+  .primer-toc.is-open .primer-toc__inner { display: block; }
+  /* A markdown table's column count is fixed by its source, so its min-content
+     width outruns a phone (measured: 79px of page overflow on /drachmae). Give
+     the table its own horizontal scroller instead of letting it drag the page
+     sideways. `display: block` is what makes the table box a scrollport; the
+     rows still lay out through the anonymous table box inside it. */
+  .primer-article table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}

package/modules/hall-ui/public/style.css

@@ -173,6 +173,11 @@
   --sidebar-w:       var(--sidebar-w-rail);
   --rail-open:       246px;
   --content-max:     1120px;
+  /* the READING ceiling (task 1003306). A reading room is narrower than a
+     working surface: past ~1010px the article card is more empty ground than
+     page and reads as a void, so the room's head and its two columns share one
+     cap rather than each carrying a literal. */
+  --room-max:        1010px;
   /* the RIGHT rail — the room a page reserves beside its main column for a
      fixed side panel (the ideas composer's meter). Named here so the reserve
      and the panel are measured from one value; see `.app-content--railed`. */
@@ -206,12 +211,18 @@
   --shadow-pop: 0 18px 40px rgba(0, 0, 0, .28);
 
   /* ---- z ladder — content overlays (rank tips z-50, modals z-50, toast z-100,
-     copy-toast z-1000, deeplink z-2000, diagram fullscreen z-9999) must beat
-     the chrome; the mobile drawer sits above chrome but below dialogs. ---- */
+     copy-toast z-1000, deeplink z-2000) must beat the chrome; the mobile drawer
+     sits above chrome but below dialogs. The two ends belong to the reading
+     rooms and were hand-written numbers until task 1003306 named them: the
+     reading hairline sits UNDER the topbar so it reads as the article's
+     progress and not as app chrome, and the diagram's fullscreen canvas is the
+     top of the whole ladder because it covers the shell entirely. ---- */
+  --z-progress: 25;
   --z-topbar: 30;
   --z-sidebar: 40;
   --z-scrim: 140;
   --z-drawer: 150;
+  --z-diagram-full: 9999;
 
   /* ---- the hall's own plate: the declared seam, deferred by the owner
           ("decide after the shell lands", 2026-08-30). The hall's plate was
@@ -1270,6 +1281,53 @@ main:focus { outline: none; }
 }
 .page-head--board .page-head__sub { font-size: 14px; max-width: var(--measure); }
 
+/* The READING-ROOM page head (task 1003306, mock docs/design/mocks/hall/reading/v3.html).
+   The board's head is quiet BECAUSE the board is a working surface and the page's
+   name is the least interesting thing on it. A reading room is the opposite: the
+   document IS the page, so its name is the largest thing in the first viewport,
+   lowercase in the display face over the ground, with the label voice spent on a
+   one-word eyebrow above it. Two voices, one per archetype — the divergence is
+   the owner's pick, not drift.
+   The sub takes --measure because it is body prose. The h1 does NOT: --measure is
+   the BODY measure, and spending it on a display line caps it near 950px and lets
+   the title run the column's width (tests/hall_record_world.mjs §8). A heading's
+   cap is the room's own --room-max, which is a layout ceiling, not a measure.
+   The modifier carries the VOICE only. The room's WIDTH belongs to room.css,
+   which caps the head and the column it heads from one value — so a page that
+   takes the voice without loading the archetype (Ranks) keeps the shell's width
+   for both, and never ends up with a 1010px head over 1120px cards. */
+.page-head--room { padding: var(--sp-xl) 0 var(--sp-lg); margin: 0; }
+.page-head--room .page-head__eyebrow {
+  margin: 0 0 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.page-head--room .page-head__h {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(34px, 4.6vw, 58px);
+  line-height: 1.02;
+  letter-spacing: -0.042em;
+  text-transform: lowercase;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+.page-head--room .page-head__sub {
+  margin: var(--sp-md) 0 0;
+  max-width: var(--measure);
+  font-size: 16px;
+  color: var(--ink-soft);
+}
+@media (max-width: 760px) {
+  .page-head--room { padding-top: var(--sp-lg); }
+  .page-head--room .page-head__h { font-size: 34px; }
+}
+
 .hall-nav {
   position: sticky;
   top: var(--topbar-h);
@@ -2345,7 +2403,17 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   .task__body { grid-column: 1 / -1; }
 }
 
-/* ---------- ranks page ---------- */
+/* ---------- ranks page ----------
+   Re-skinned into the chrome world by task 1003306 (goal 1000081). Ranks is a
+   reading room by archetype — a document about the ladder — so it takes the
+   room's page head (.page-head--room) and the room's voice on its labels, but
+   not room.css: it has no article, no table of contents and no figures, and a
+   sheet loaded for one max-width is a request spent on nothing.
+   The rank card is `.scroll--quiet`'s level expressed as a list row: a tone one
+   step further from the ground than the panel it sits in, with the edge
+   reserved as transparent so a modifier can draw one without the base having
+   to. The compat aliases are retired here; the badges above still spend them,
+   because they render on every page in the hall and belong to 1003308. */
 
 .ranks-standing {
   display: grid;
@@ -2354,47 +2422,51 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   align-items: center;
 }
 .ranks-standing__badge { display: flex; }
-.ranks-standing__title { font-weight: 650; font-size: 15px; }
-.ranks-standing__blurb { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
+.ranks-standing__title { font-family: var(--font-display); font-weight: 300; font-size: 19px; letter-spacing: -0.02em; }
+.ranks-standing__blurb { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); max-width: var(--measure); }
 .ranks-standing__next { grid-column: 1 / -1; font-size: 13px; color: var(--ink-faint); }
 @media (max-width: 540px) { .ranks-standing { grid-template-columns: minmax(0, 1fr); } }
 
 .ranks-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
 .rank-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--glass);
+  border: var(--line) solid transparent;
   border-radius: var(--radius);
-  padding: 14px 16px;
+  padding: var(--sp-sm) 16px;
 }
-.rank-card--current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-weak); }
-.rank-card--next { border-style: dashed; }
+/* the reader's own rung is the one warm thing on the ladder */
+.rank-card--current { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
+.rank-card--next { border-style: dashed; border-color: var(--rule); }
 .rank-card--sealed { opacity: 0.7; }
 .rank-card--placeholder { color: var(--ink-faint); }
 .rank-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.rank-card__title { font-weight: 650; font-size: 14px; }
+.rank-card__title { font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; }
 .rank-card__status {
   margin-left: auto;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
 }
-.rank-card__status--current { color: var(--accent-text); }
+.rank-card__status--current { color: var(--accent-ink); }
 .rank-card__status--next { color: var(--info); }
 .rank-card__status--sealed { color: var(--ink-faint); }
-.rank-card__blurb { font-size: 13px; color: var(--ink-soft); margin: 6px 0; }
+.rank-card__blurb { font-size: 13px; color: var(--ink-soft); margin: 6px 0; max-width: var(--measure); }
 .rank-card__blurb--sealed { font-style: italic; }
 .rank-card__unlocks-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
-  margin: 8px 0 4px;
+  margin: 10px 0 4px;
 }
-.rank-card__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
+.rank-card__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); max-width: var(--measure); }
 .rank-card__list li { margin: 2px 0; }
-.ranks-rise__body { font-size: 13.5px; }
+.rank-card__list li::marker { color: var(--ink-faint); }
+.ranks-rise__body { font-size: 13.5px; max-width: var(--measure); }
 .ranks-rise__body p { margin: 8px 0; }
 
 /* ---------- toast + copy toast + deep-link overlay ---------- */

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.449",
+  "version": "1.19.451",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.19.449",
+      "version": "1.19.451",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.449",
+  "version": "1.19.451",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",