@bongos/core 1.18.0 → 1.18.18

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

@@ -65,6 +65,28 @@
   --z-drawer: 150;
 }
 
+/* ---------- spacing scale (task 2179) ----------
+   Four steps, deliberately matching the values the sheet had already converged
+   on (a census found 6/10/16/20 dominant), so this NAMES the existing rhythm
+   rather than restyling the hall. It governs the three things that decide
+   density — card padding, card gap, section gap — and is not a mandate to
+   rewrite every inset; chip and control padding stay as authored.
+
+   Kept in its OWN block rather than added to :root above: :root is the
+   pack-driven theming contract an instance overrides, and the program's audit
+   requires it unchanged. Spacing is structure, not theme.
+
+     1  6px   tight — inside a row or chip
+     2  10px  default gap between siblings
+     3  16px  comfortable — secondary card padding
+     4  20px  card padding, card gap, section gap                              */
+:root {
+  --space-1: 6px;
+  --space-2: 10px;
+  --space-3: 16px;
+  --space-4: 20px;
+}
+
 /* ---------- dark theme ----------
    Only the NEUTRALS flip; the instance pack's accent/sea/terracotta + fonts
    survive, and every derived token (color-mix on these vars) re-derives
@@ -212,8 +234,7 @@ button { font-family: var(--font-body); }
   flex-direction: column;
   background: var(--surface);
   border-right: 1px solid var(--border);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .app-sidebar__brand {
@@ -253,6 +274,19 @@ button { font-family: var(--font-body); }
   display: flex;
   flex-direction: column;
   gap: 2px;
+  /* task 1002446: the nav list is the scroller, not the whole sidebar. The
+     brand and foot were already flex-shrink:0 — the intent was always that they
+     stay put — but with overflow on .app-sidebar they scrolled away with
+     everything else, so the 2175 nav groups pushed "Sign out" 27px under a
+     844px-tall window. Scrolling the list instead pins sign-out for good,
+     however many groups a later task adds. `min-height: 0` is what lets a flex
+     child shrink below its content and actually scroll; the explicit
+     `overflow-x: hidden` keeps the clip .app-sidebar used to provide, since
+     `overflow-y: auto` alone would promote the x axis to auto and give the
+     collapsed rail a stray sideways scrollbar. */
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .nav-group { display: flex; flex-direction: column; gap: 2px; }
 .nav-group + .nav-group { margin-top: 14px; }
@@ -358,6 +392,7 @@ button { font-family: var(--font-body); }
 }
 .shell-user__rank { font-size: 11.5px; color: var(--ink-faint); }
 .shell-signin,
+.shell-home,
 .shell-signout {
   display: flex;
   align-items: center;
@@ -369,12 +404,14 @@ button { font-family: var(--font-body); }
   font-weight: 500;
   color: var(--ink-soft);
 }
+.shell-home { text-decoration: none; }
 .shell-signin {
   justify-content: center;
   background: var(--accent);
   color: #fff;
 }
 .shell-signin:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }
+.shell-home:hover,
 .shell-signout:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
 
 .app-body {
@@ -487,11 +524,11 @@ button { font-family: var(--font-body); }
   flex: 1;
 }
 
-.app-views .view > .view-zone + .view-zone { margin-top: 20px; }
+.app-views .view > .view-zone + .view-zone { margin-top: var(--space-4); }
 .view-zone--band {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: var(--space-4);
   align-items: start;
 }
 .view-zone--band > .scroll { margin: 0; }
@@ -527,7 +564,7 @@ button { font-family: var(--font-body); }
   .nav-item__label,
   .nav-group__head,
   .shell-user__meta { display: none; }
-  .nav-item, .shell-signout { justify-content: center; padding: 0; }
+  .nav-item, .shell-home, .shell-signout { justify-content: center; padding: 0; }
   .nav-item--active::before { left: -6px; }
   .shell-user { justify-content: center; padding: 2px 0; }
   .shell-signin { font-size: 0; padding: 0; height: 34px; }
@@ -544,7 +581,7 @@ button { font-family: var(--font-body); }
   html.drawer-open .app-sidebar { transform: translateX(0); box-shadow: var(--shadow-pop); }
   .app-body { margin-left: 0; }
   .brand-mark__name, .nav-item__label, .nav-group__head, .shell-user__meta { display: block; }
-  .nav-item, .shell-signout { justify-content: flex-start; padding: 0 10px; }
+  .nav-item, .shell-home, .shell-signout { justify-content: flex-start; padding: 0 10px; }
   .shell-user { justify-content: flex-start; }
   .shell-signin { font-size: 13.5px; padding: 0 10px; }
   .shell-signin::after { content: none; }
@@ -564,12 +601,17 @@ button { font-family: var(--font-body); }
 
 /* ---------- cards (the .scroll legacy name is load-bearing) ---------- */
 
+/* The three sanctioned card levels (task 2179). Anything that looks like a card
+   is one of these — a fourth variant is a design decision, not a local override:
+     .scroll         primary   — the default surface for a section
+     .scroll--quiet  secondary — a card INSIDE a card, or supporting detail
+     .scroll--bare   none      — layout-only, for stat rows and grids          */
 .scroll {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 20px;
-  margin: 0 0 20px;
+  padding: var(--space-4);
+  margin: 0 0 var(--space-4);
   /* anchor jumps must clear the 56px sticky top bar */
   scroll-margin-top: calc(var(--topbar-h) + 16px);
 }
@@ -580,6 +622,16 @@ button { font-family: var(--font-body); }
   border-radius: 0;
   padding: 0;
 }
+/* Secondary level: recedes against a primary card via surface-2 and a quieter,
+   smaller header. Use for supporting detail — not to fit more onto Home. */
+.scroll--quiet {
+  background: var(--surface-2);
+  padding: var(--space-3);
+}
+.scroll--quiet > .scroll__h {
+  font-size: 13.5px;
+  color: var(--ink-soft);
+}
 
 .scroll__h {
   margin: 0 0 6px;
@@ -680,6 +732,12 @@ button { font-family: var(--font-body); }
 .rail-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
 .rail-link--active { background: var(--accent-weak); color: var(--accent-text); }
 
+/* task 2174: a Standing rail section — the scroll-spy anchor holding one or
+   more cards. The extra air between groups is what makes the grouping legible
+   without adding a second level of headings above the cards' own. */
+.standing-group + .standing-group { margin-top: 16px; }
+.standing-group:last-child > .scroll:last-child { margin-bottom: 0; }
+
 @media (max-width: 768px) {
   .standing-layout { grid-template-columns: minmax(0, 1fr); }
   .section-rail {
@@ -843,6 +901,25 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .ledger th.ledger__sortable[aria-sort="ascending"]::after { content: " ↑"; }
 .ledger th.ledger__sortable[aria-sort="descending"]::after { content: " ↓"; }
 
+/* task 1002446: a ledger's column count is fixed by its data, so its min-content
+   width outruns a phone and drags the whole page sideways — measured at 390w:
+   leaderboard 218px, Standing's ships table 19px, Home's recent-work 8px. (The
+   .rank-tip fix in the same task is what exposed these; its 62px used to swamp
+   them.) The strip goes on the ledger's PARENT, not on the ledger. Making the
+   table itself `display: block` does turn it into a scroller, but it also re-wraps
+   its rows in an anonymous table box that is shrink-to-fit, so any ledger NARROWER
+   than its card stops short of the card's right edge — measured at 390w on
+   /profile, #works-table's rows rendered 240px inside a 329px card, which is every
+   empty state in the hall. Left a table, it keeps `width: 100%` (fills) and lets
+   min-content push past the card, which is what the card then scrolls — the same
+   strip treatment .section-rail / .kit-tabs already use. Sticky headers go with
+   it: sticky would otherwise resolve against the new scrollport instead of the
+   window, so it is switched off rather than left silently broken. */
+@media (max-width: 640px) {
+  :has(> .ledger) { overflow-x: auto; }
+  .ledger th { position: static; }
+}
+
 /* ---------- filters / pager / buttons ---------- */
 
 .filters {
@@ -989,7 +1066,7 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .profile__karma-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
 .profile__placeholder { color: var(--ink-faint); font-size: 13.5px; }
 
-.profile__budget, .profile__needs {
+.profile__budget, .profile__needs, .profile__rebase {
   grid-column: 1 / -1;
   border-radius: var(--radius-sm);
   padding: 10px 14px;
@@ -1001,6 +1078,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .profile__needs--action { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
 .profile__needs--covered { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
 .profile__needs-act { font-weight: 600; white-space: nowrap; }
+/* ADR 0120 part 5: owed-rebase gate banner — danger-tinted (it blocks new claims). */
+.profile__rebase { background: var(--danger-weak); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
 
 .disc-pref { margin-right: 4px; }
 
@@ -1063,6 +1142,18 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .rank-tip__list li { margin: 2px 0; }
 .rank-tip__more { margin: 6px 0 0; color: var(--ink-faint); }
 
+/* The tip is 240px anchored to the badge's LEFT edge, and the badge sits partway
+   across the identity band — so under ~640px it reaches past the viewport and
+   drags the whole page into sideways scroll. `visibility: hidden` still occupies
+   layout, so that happened on every hall page at phone width with nothing even
+   visible (measured: 62px of phantom scroll at 390w). Below the breakpoint where
+   .profile already reflows, drop it: it is a hover popover, and a touch on the
+   badge follows .rank-badge-stretch to /ranks — the full ladder the tip's own
+   footer points at. The badge keeps its aria-label, so the rank is still named. */
+@media (max-width: 640px) {
+  .rank-tip { display: none; }
+}
+
 /* ---------- karma / acclaim ---------- */
 
 .karma-badge__trend { font-variant-numeric: tabular-nums; }
@@ -1586,35 +1677,6 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .ranks-rise__body { font-size: 13.5px; }
 .ranks-rise__body p { margin: 8px 0; }
 
-/* ---------- security / roster / admin leftovers ---------- */
-
-.sev-badge {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 9px;
-  border-radius: 999px;
-  font-size: 11.5px;
-  font-weight: 600;
-}
-.sev-low { background: var(--surface-2); color: var(--ink-soft); }
-.sev-medium { background: var(--info-weak); color: var(--info); }
-.sev-high { background: var(--warn-weak); color: var(--warn); }
-.sev-critical { background: var(--danger-weak); color: var(--danger); }
-
-.security-audit-details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
-.override__rationale { font-size: 12.5px; color: var(--ink-soft); }
-
-.roster__stale { color: var(--warn); }
-.roster__inactive { color: var(--ink-faint); }
-.roster__self { font-weight: 600; }
-#roster-table td:last-child { white-space: nowrap; }
-#roster-table td:last-child button { margin-left: 6px; }
-
-.skill-prefs__select { min-width: 160px; }
-.skill-prefs__default { color: var(--ink-faint); }
-.voices__select { min-width: 160px; }
-
 /* ---------- toast + copy toast + deep-link overlay ---------- */
 
 .toast {
@@ -1718,7 +1780,9 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   overflow-y: auto;
 }
 .td-touches { font-size: 12.5px; color: var(--ink-faint); word-break: break-word; margin: 0 0 12px; }
-.td-section-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 0 0 4px; }
+/* Shared small-caps label: overlay section heads and triage form-field labels. */
+.td-section-h, .td-field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
+.td-section-h { margin: 0 0 4px; }
 .td-deps { margin: 0 0 12px; }
 .td-dep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
 .td-dep { font-size: 13px; color: var(--accent-text); text-decoration: none; }
@@ -1741,6 +1805,30 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .td-btn:disabled { opacity: 0.6; cursor: default; }
 .td-action-note { flex-basis: 100%; font-size: 12.5px; color: var(--warn); margin: 4px 0 0; }
 
+/* Idea triage inside the record overlay (task 1002447). A two-column grid so
+   promote's five fields fit the panel without scrolling; --wide spans both. */
+.td-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 14px 0 0; }
+.td-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.td-field--wide { grid-column: 1 / -1; }
+.td-field input, .td-field select {
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink);
+  min-width: 0;
+  max-width: 100%;
+}
+.td-form .td-actions, .td-form-hint, .td-form .td-action-note { grid-column: 1 / -1; }
+.td-form .td-actions { margin: 4px 0 0; }
+.td-form-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
+
+@media (max-width: 460px) {
+  .td-form { grid-template-columns: 1fr; }
+}
+
 /* ---------- misc shared bits ---------- */
 
 .vgoal { border: 1px solid var(--border); border-radius: var(--radius); }
@@ -1945,3 +2033,107 @@ a.stat-tile:hover {
 .next-up__title:hover { color: var(--accent-text); }
 .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; }
+
+/* ---------- jump palette (task 2178) ----------
+   The top-bar slot + the Ctrl/Cmd-K overlay. Styled from existing tokens only —
+   no new theme vars, so dark mode follows the neutral flip for free. The overlay
+   mirrors .deeplink-card's posture (fixed scrim + centred panel, z above the
+   drawer) so the two modal surfaces read as one system. */
+.topbar-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-faint);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  min-width: 0;
+}
+.topbar-jump:hover { color: var(--ink-soft); border-color: var(--ink-faint); }
+.topbar-jump svg { width: 15px; height: 15px; flex-shrink: 0; }
+.topbar-jump__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.topbar-jump__kbd {
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--ink-faint);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  white-space: nowrap;
+}
+
+.palette { position: fixed; inset: 0; z-index: 2100; }
+.palette__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent); }
+.palette__panel {
+  position: relative;
+  margin: 10vh auto 0;
+  max-width: 560px;
+  width: calc(100% - 32px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  overflow: hidden;
+}
+.palette__input {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 15px;
+  padding: 14px 16px;
+  outline: none;
+}
+.palette__input::placeholder { color: var(--ink-faint); }
+.palette__list {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.palette__item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.palette__item--active { background: var(--accent-weak); }
+.palette__group {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  flex-shrink: 0;
+  min-width: 68px;
+}
+.palette__label { font-size: 13.5px; color: var(--ink); }
+.palette__item--active .palette__label { color: var(--accent-text); font-weight: 600; }
+.palette__hint, .palette__empty { font-size: 12px; color: var(--ink-faint); }
+.palette__empty { padding: 14px 12px; line-height: 1.6; }
+.palette__empty kbd {
+  font-family: inherit;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+html.palette-open { overflow: hidden; }
+
+@media (max-width: 768px) {
+  /* The slot keeps its icon as an affordance; the label + hint would crowd the
+     title on a phone. Ctrl/Cmd-K still opens it on a keyboard. */
+  .topbar-jump__label, .topbar-jump__kbd { display: none; }
+  .topbar-jump { padding: 0 8px; }
+  .palette__panel { margin-top: 6vh; }
+  .palette__group { min-width: 56px; }
+}