@bongos/core 1.19.446 → 1.19.447

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

@@ -1027,6 +1027,36 @@ main:focus { outline: none; }
   font-size: 13px;
 }
 
+/* The 24px floor for links that sit in PROSE (task 1003304). A link in a lede,
+   a card foot or a setup hint is a real control in a line with no vertical
+   rhythm of its own, so it renders at its 17-19px line box and fails the floor
+   — measured on Home and the board at every width in both modes ("Roadmap"
+   59x18, "Goals page" 69x18, "View full standing" 118x18, "primer" 37x17).
+   DESIGN.md's footer rule is the remedy: go inline-block and buy the height
+   back with padding, which costs the line's own leading nothing.
+   THE FLOOR IS BOTH AXES, and that is the half worth writing down — "Git" came
+   back 17x24, still failing, because a three-letter link is genuinely narrower
+   than 24px. The horizontal padding buys the width and the equal negative
+   margin gives it straight back to the layout, so the target grows and the
+   sentence does not re-space around it.
+   It lives here rather than in each page's sheet because these classes are the
+   shell's, and the alternative is five identical copies as 1003305-1003308
+   land. */
+.scroll__lede a,
+.card-foot a,
+.next-up__foot a,
+.setup__steps a,
+.setup__hint a,
+.setup__foot a {
+  display: inline-block;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 3px 4px;
+  margin: 0 -4px;
+  line-height: 18px;
+  text-align: center;
+}
+
 .pill-link,
 #welcome-reopen a {
   display: inline-flex;
@@ -1569,10 +1599,14 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 
 /* ---------- rank badges + tooltip ---------- */
 
+/* 24px, not the old 20 (task 1003304). The badge is not itself a control, but
+   .rank-badge-stretch below covers it edge to edge and IS one — so the badge's
+   height is the link's height, and at 20 it failed the floor on every page that
+   renders a rank. Only the box grew; the type and the colours are untouched. */
 .rank-badge {
   display: inline-flex;
   align-items: center;
-  height: 20px;
+  height: 24px;
   padding: 0 9px;
   border-radius: 999px;
   font-size: 11.5px;
@@ -1873,6 +1907,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .setup[data-config="online"] .setup__pane--online { display: block; }
 .setup__steps { margin: 8px 0; padding-left: 20px; font-size: 13.5px; }
 .setup__steps li { margin: 6px 0; }
+/* The setup panel's prose links ("Git", "Claude Code", "primer") take the
+   shared prose-link floor rule in the cards section above (task 1003304). */
 .setup__steps code {
   font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
@@ -1956,7 +1992,18 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .setup__copy:hover { background: var(--surface-2); }
 .setup__copy--copied { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
 .setup__getcode { margin: 10px 0; }
-.setup__getcode-summary { cursor: pointer; font-weight: 600; font-size: 13px; }
+/* A <summary> is a control, so it owes the 24px floor like any other; it
+   measured 20px tall (task 1003304). The height is bought with padding rather
+   than a display change, because a <summary> is display:list-item by default
+   and flex or block would silently eat its disclosure marker. */
+.setup__getcode-summary {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+}
 .setup__getcode-lede { font-size: 12.5px; color: var(--ink-soft); }
 .setup__getcode-body { margin-top: 8px; }
 
@@ -2048,32 +2095,87 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .goal-mine__ver { font-size: 12px; color: var(--ink-faint); }
 .goal-mine__foot { font-size: 13px; margin: 10px 0 0; }
 
-/* ---------- work-board task cards (work page) ---------- */
+/* ---------- work-board task cards (work page) ----------
+   Re-skinned into the chrome world by task 1003304 (goal 1000081). In v3 "the
+   glass hall" a claimable task IS the panel — --bg-card at the full --radius,
+   tone separating it from the ground, no drawn edge at rest — which is why
+   #claim-scroll in work.html is .scroll--bare: a .scroll around these would be
+   a card inside a card. The dense LISTS on the other three tabs keep their
+   panel and take v1's bare-ledger row inside it (direction §6). */
 
-.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
 .task {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto auto;
-  gap: 4px 14px;
-  align-items: center;
-  background: var(--surface);
-  border: 1px solid var(--border);
+  gap: 0 18px;
+  align-items: start;
+  background: var(--bg-card);
+  /* The edge is transparent at rest and spends --glass-edge on hover: v3
+     separates by tone, and a drawn border on every row rebuilds the boxed
+     stack the pick removed. The 1px is always there so nothing reflows. */
+  border: var(--line) solid transparent;
   border-radius: var(--radius);
-  padding: 12px 16px;
-}
-.task__id { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 13px; display: flex; align-items: center; gap: 6px; }
-/* task 1759: the work-board multi-select checkbox, hosted in the id cell so no
-   grid column needs to shift. Sized up slightly from a native default checkbox
-   so it's an easy target next to the small id text. */
-.task__select { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex: none; }
-.task--selected { border-color: var(--accent); background: var(--accent-weak); }
-/* task 1869: the explicit open-detail hitbox — clicking the card body now
-   toggles selection, so this small icon button is the only way in from a
-   claimable card to the task-detail overlay. */
+  padding: 17px 22px;
+}
+.task:hover { border-color: var(--glass-edge); }
+.task__id { display: flex; align-items: center; gap: 2px; padding-top: 2px; }
+.task__num {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+/* task 1759, re-cut for the 24px floor (task 1003304): the hit area is 24px and
+   the DRAWN box is 14px inside it. The old 15px input was the control itself,
+   so it failed the floor at every width — painting the box with ::before is
+   what lets the target grow without the checkbox growing with it. */
+.task__select {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  flex: none;
+  cursor: pointer;
+}
+.task__select::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  border: var(--line) solid var(--rule);
+  border-radius: 3px;
+}
+.task__select:checked::before { background: var(--accent); border-color: var(--accent); }
+.task__select:checked::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--accent-on);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(42deg);
+}
+/* Selection is NOT hover. The mock draws both with --glass-edge, which reads
+   fine on a mock with one selected row and not at all on a board whose whole
+   point is selecting several for the bulk bar — so selection keeps an accent
+   signal (a selected row is live, which is what the accent is for).
+   The EDGE carries it, not a fill: --accent-tint is a 30% mix in light, and
+   three selected rows painted with it took over the page (looked at, 1280w
+   light). The checked box is already an accent fill on every selected row;
+   a second one per row is what made it shout. */
+.task--selected { border-color: var(--accent); }
+/* task 1869: the explicit open-detail hitbox — clicking the card body toggles
+   selection, so this is the only way from a claimable card into the overlay. */
 .task__open {
   flex: none;
-  width: 18px;
-  height: 18px;
+  width: 26px;
+  height: 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2085,41 +2187,68 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   cursor: pointer;
   border-radius: var(--radius-sm);
 }
-.task__open:hover { color: var(--ink); background: var(--surface-2); }
-.task__body { min-width: 0; }
-.task__title { font-weight: 600; font-size: 13.5px; margin: 0; }
-.task__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
+.task__open:hover { color: var(--ink); background: var(--glass); }
+.task__body { min-width: 0; padding-top: 2px; }
+.task__title { font-weight: 400; font-size: 14.5px; line-height: 1.4; margin: 0 0 7px; color: var(--ink); }
+.task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--ink-faint); margin-top: 0; }
+/* The label voice, outlined — a tag is a fact about the task, never a fill. */
 .task__tag {
   display: inline-flex;
   align-items: center;
-  height: 18px;
-  padding: 0 8px;
-  border-radius: 999px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  font-size: 11px;
-  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  background: none;
+  border: var(--line) solid var(--rule);
+  font-family: var(--label-face);
+  font-size: 10.5px;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-soft);
 }
-.task__credits { text-align: right; }
-.task__credits-num { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 15px; }
-.task__credits-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
+.task__credits { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 2px; }
+/* A credit figure is DATA, not live — the display face in ink, never accent
+   (DESIGN.md, The One Warm Thing Rule + The Tabular Rule). */
+.task__credits-num {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 26px;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+.task__credits-label {
+  font-family: var(--label-face);
+  font-size: 10px;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
 .task__copy {
-  border: 1px solid var(--border-strong);
-  background: var(--surface);
-  color: var(--ink-soft);
-  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: var(--line) solid var(--rule);
+  background: none;
+  color: var(--ink-faint);
+  border-radius: var(--radius-pill);
   font-size: 12.5px;
-  padding: 4px 10px;
+  padding: 0;
   cursor: pointer;
 }
-.task__copy:hover { background: var(--surface-2); }
+.task__copy:hover { color: var(--ink); border-color: var(--ink-faint); }
+/* The status vocabulary, not the accent: "copied" is a verification state. */
 .task__copy[data-copied="1"] { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
-.task__copy-icon { margin-right: 4px; }
+.task__copy-icon { margin-right: 0; }
 
 @media (max-width: 640px) {
-  .task { grid-template-columns: auto minmax(0, 1fr); }
-  .task__credits { grid-column: 2; text-align: left; }
+  .task { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 16px; }
+  .task__id { grid-column: 1; }
+  .task__credits { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; gap: 6px; }
+  .task__credits-num { font-size: 20px; }
+  .task__body { grid-column: 1 / -1; }
 }
 
 /* ---------- ranks page ---------- */
@@ -2389,10 +2518,21 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
    invitations to accept + join-requests to approve. Matches the home widgets'
    card language (.scroll host); each row is body-left / actions-right. */
 .ginbox { list-style: none; margin: 0 0 4px; padding: 0; }
+/* Home's sub-heading voice — the label token, not a hardcoded uppercase (task
+   1003304). Taking the token is what makes it flip: --label-face resolves to
+   the mono in light and back to the body face in dark, because mono caps read
+   as precise on paper and thin on black. All four users of this class
+   (hall-widgets, goal-inbox, profile-nudge, builders) are Home surfaces. */
 .ginbox__sec-h {
-  margin: 14px 0 6px; font-size: 12px; font-weight: 600;
-  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint);
+  margin: 22px 0 10px;
+  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);
 }
+.ginbox__sec-h:first-child { margin-top: 0; }
 .ginbox__item {
   display: flex; align-items: flex-start; gap: 12px;
   padding: 9px 0; border-top: 1px solid var(--rule-soft);
@@ -2495,7 +2635,7 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .kit-collapse__summary .scroll__h { display: inline; margin: 0; }
 .kit-collapse__body { margin-top: 12px; }
 
-/* ---- Home dashboard (task 2169) ---- */
+/* ---- Home dashboard (task 2169; re-skinned into the world by task 1003304) ---- */
 /* Stat tiles are links now — inherit ink, reveal affordance on hover. */
 a.stat-tile { color: inherit; }
 a.stat-tile:hover { text-decoration: none; background: var(--glass); }
@@ -2503,35 +2643,37 @@ a.stat-tile:hover .stat-tile__sub { color: var(--ink-soft); }
 /* The over-budget "More" row — one quiet line, not a card. */
 .home-more { margin: 0; font-size: 13px; color: var(--ink-soft); }
 
-/* task 2184: two-column main zone on wide screens — Home reads as a
-   dashboard, not a stack. The attention inbox (and the More row) span both
-   columns; the home-main cards sit side by side. Mirrors the
-   .view-zone--band grid idiom (cards drop their own margins inside a grid). */
+/* task 2184's two-column main zone, RETIRED by task 1003304. The zone holds
+   the attention inbox, the More row and the overflow — all three of which
+   already spanned both columns — plus ONE card, Your work. So the second
+   column was always empty and the "dashboard, not a stack" it was reaching for
+   is what #zone-home-band above actually delivers (Standing beside Goals).
+   v3 agrees: its board mock puts the two-up in a .band and runs
+   "Needs your attention" and "Your work" full width as sheets. One column
+   here, and the dead half of the page goes away. */
 #zone-home-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
 #zone-home-main > .scroll { margin: 0; }
-@media (min-width: 1024px) {
-  #zone-home-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  #zone-home-main > #attention-scroll,
-  #zone-home-main > #home-more-row,
-  #zone-home-main > #zone-home-overflow { grid-column: 1 / -1; }
-}
 
 /* task 2184: the "Next up" slice in the Your-work card — the page's answer to
-   "what's my next action". Quiet rows, accented title, one foot link. */
-.next-up { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+   "what's my next action". v1's bare ledger row inside v3's panel (direction
+   §6): a hairline and the row's own air, never a filled tile — a fill here was
+   a card inside a card, and it was the last site in the hall spending
+   --surface-2 as a raised surface. The first row drops its rule and its top
+   padding so the list starts flush against the panel's air. */
+.next-up { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 0; }
 .next-up__item {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: 10px 14px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
+  padding: 14px 0;
+  border-top: var(--line) solid var(--rule-soft);
+  background: none;
 }
-.next-up__title { font-weight: 500; font-size: 13.5px; color: var(--ink); }
+.next-up__item:first-child { border-top: 0; padding-top: 0; }
+.next-up__title { font-weight: 400; font-size: 14px; color: var(--ink); }
 .next-up__title:hover { color: var(--accent-ink); }
-.next-up__meta { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
-.next-up__foot { margin: 0 0 14px; font-size: 13px; }
+.next-up__meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.next-up__foot { margin: 14px 0 18px; font-size: 13px; }
 
 /* ---------- jump palette (task 2178) ----------
    The top-bar slot + the Ctrl/Cmd-K overlay. Styled from existing tokens only —