@bongos/core 1.17.0

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

@@ -0,0 +1,1748 @@
+/* builders hall — the vanilla Cloud Bongos dashboard shell (task 1723).
+   Clean, neutral, calm: app shell (fixed sidebar + sticky top bar + one
+   window-scrolled content column) + a small reused component kit.
+   Scope: docs/design/vanilla-hall-ui-redesign-scope.md.
+
+   THEMING CONTRACT (do not rename): the 13 color vars + 2 font vars below are
+   the instance-pack API — serve-internal.js themeMarkup() re-declares them from
+   config/branding.*.json AFTER this file, so an instance's palette/fonts win.
+   Everything else derives from them (color-mix) so any pack reskins the whole
+   kit. The values here are the neutral vanilla defaults. */
+
+:root {
+  /* ---- pack-driven vars (the theming API) ---- */
+  --bg:           #f5f6f8;
+  --bg-card:      #ffffff;
+  --bg-deep:      #eceef2;
+  --bg-frame:     #e7e9ee;
+
+  --ink:          #1a1d23;
+  --ink-soft:     #5b6372;
+  --ink-faint:    #8b93a1;
+  --rule:         #d4d8e0;
+  --rule-soft:    #e6e8ee;
+  --accent:       #4f63e7;
+  --accent-deep:  #3b4dc4;
+  --sea:          #175cd3;
+  --terracotta:   #b45309;
+
+  --font-display: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
+  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
+
+  /* ---- derived tokens (recompute from the pack vars) ---- */
+  --surface:       var(--bg-card);
+  --surface-2:     color-mix(in srgb, var(--bg-card) 45%, var(--bg));
+  --border:        color-mix(in srgb, var(--ink) 11%, var(--bg));
+  --border-strong: color-mix(in srgb, var(--ink) 22%, var(--bg));
+  --accent-weak:   color-mix(in srgb, var(--accent) 9%, var(--bg-card));
+  --accent-text:   color-mix(in srgb, var(--accent) 82%, var(--ink));
+
+  /* semantic status colors (deliberately NOT pack-driven) */
+  --ok:          #1a7f4b;
+  --ok-weak:     color-mix(in srgb, #1a7f4b 12%, var(--bg-card));
+  --warn:        #9a6700;
+  --warn-weak:   color-mix(in srgb, #d99a00 14%, var(--bg-card));
+  --danger:      #b42318;
+  --danger-weak: color-mix(in srgb, #b42318 10%, var(--bg-card));
+  --info:        var(--sea);
+  --info-weak:   color-mix(in srgb, var(--sea) 11%, var(--bg-card));
+
+  /* layout metrics (scope §10) */
+  --sidebar-w: 240px;
+  --sidebar-w-rail: 64px;
+  --topbar-h: 56px;
+  --content-max: 1120px;
+  --radius: 10px;
+  --radius-sm: 8px;
+  --shadow-pop: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
+
+  /* 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. */
+  --z-topbar: 30;
+  --z-sidebar: 40;
+  --z-scrim: 140;
+  --z-drawer: 150;
+}
+
+/* ---------- 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
+   automatically. html[data-theme] outweighs the pack's injected :root override
+   (specificity 0,1,1 vs 0,1,0), so dark wins over the pack's light values.
+   shell.js owns the toggle + persistence (localStorage 'hall-theme'); the
+   media block below covers first paint for OS-dark users before it runs. */
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --bg:       #101216;
+  --bg-card:  #181b21;
+  --bg-deep:  #0c0e11;
+  --bg-frame: #1e222a;
+  --ink:       #e7e9ee;
+  --ink-soft:  #9aa2b1;
+  --ink-faint: #6b7280;
+  --rule:      #333945;
+  --rule-soft: #242933;
+  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
+}
+html[data-theme="dark"] body { background: var(--bg); }
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) {
+    color-scheme: dark;
+    --bg:       #101216;
+    --bg-card:  #181b21;
+    --bg-deep:  #0c0e11;
+    --bg-frame: #1e222a;
+    --ink:       #e7e9ee;
+    --ink-soft:  #9aa2b1;
+    --ink-faint: #6b7280;
+    --rule:      #333945;
+    --rule-soft: #242933;
+    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
+  }
+  html:not([data-theme]) body { background: var(--bg); }
+}
+
+/* ---------- base ---------- */
+
+* { box-sizing: border-box; }
+
+/* The [hidden] attribute is the hall's visibility mechanism (widgets, nav
+   gating, sealed states). Components that set their own display would defeat
+   the UA default — make hidden unconditional. */
+[hidden] { display: none !important; }
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 5px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--ink);
+  background: var(--bg);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--accent-text);
+  text-decoration: none;
+}
+a:hover { text-decoration: underline; text-underline-offset: 2px; }
+
+code, kbd, pre {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.92em;
+}
+
+select, input[type="text"], input[type="search"], textarea {
+  font-family: var(--font-body);
+  font-size: 14px;
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+}
+select:disabled { opacity: 0.55; cursor: not-allowed; }
+select option { background: var(--surface); color: var(--ink); }
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+button { font-family: var(--font-body); }
+
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0; border: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* ---------- app shell ---------- */
+
+.app { min-height: 100vh; }
+
+.app-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: var(--sidebar-w);
+  z-index: var(--z-sidebar);
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.app-sidebar__brand {
+  display: flex;
+  align-items: center;
+  min-height: var(--topbar-h);
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.brand-mark {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--ink);
+  min-width: 0;
+}
+.brand-mark:hover { text-decoration: none; }
+.brand-mark__dot {
+  width: 10px; height: 10px;
+  border-radius: 3px;
+  background: var(--accent);
+  flex-shrink: 0;
+}
+.brand-mark__name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-sidebar__nav {
+  flex: 1;
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.nav-group { display: flex; flex-direction: column; gap: 2px; }
+.nav-group + .nav-group { margin-top: 14px; }
+.nav-group__head {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  padding: 4px 10px 2px;
+}
+.nav-group--collapsible .nav-group__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.nav-group--collapsible .nav-group__head:hover { color: var(--ink-soft); }
+.nav-group__chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.nav-group--collapsed .nav-group__chevron { transform: rotate(-90deg); }
+.nav-group--collapsed .nav-item { display: none !important; }
+
+.nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: var(--radius-sm);
+  color: var(--ink-soft);
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
+.nav-item--active {
+  background: var(--accent-weak);
+  color: var(--accent-text);
+}
+.nav-item--active::before {
+  content: "";
+  position: absolute;
+  left: -10px; top: 7px; bottom: 7px;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+  background: var(--accent);
+}
+.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
+
+.app-sidebar__foot {
+  padding: 12px 10px 14px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.shell-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 6px;
+  min-width: 0;
+  /* task 1831: the chip is now an <a> to /settings — strip link chrome, keep the
+     inherited text colors, and give it a clickable hover/focus affordance. */
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.shell-user:hover { background: var(--surface-2); text-decoration: none; }
+.shell-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.shell-user__avatar {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  background: var(--accent-weak);
+  color: var(--accent-text);
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.shell-user__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.shell-user__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.shell-user__name {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.shell-user__rank { font-size: 11.5px; color: var(--ink-faint); }
+.shell-signin,
+.shell-signout {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: var(--radius-sm);
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--ink-soft);
+}
+.shell-signin {
+  justify-content: center;
+  background: var(--accent);
+  color: #fff;
+}
+.shell-signin:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }
+.shell-signout:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
+
+.app-body {
+  margin-left: var(--sidebar-w);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-topbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-topbar);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: var(--topbar-h);
+  padding: 0 24px;
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+}
+.topbar-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.topbar-side {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.topbar-note {
+  font-size: 13px;
+  color: var(--ink-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topbar-menu {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 34px; height: 34px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+  padding: 0;
+}
+.topbar-menu svg { width: 18px; height: 18px; }
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
+.theme-toggle svg { width: 17px; height: 17px; }
+
+/* task 1475: the accessibility zoom control — sibling of the theme toggle.
+   Widens to fit the "125%"/"150%" label when zoom is active. */
+.zoom-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 32px; height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.zoom-toggle:hover { background: var(--surface-2); color: var(--ink); }
+.zoom-toggle svg { width: 17px; height: 17px; }
+/* Active (zoomed-in) state reads as "on" with the instance accent. */
+.zoom-toggle--on {
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: var(--accent-weak);
+  color: var(--accent-text);
+}
+.zoom-toggle__pct {
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.app-content {
+  width: 100%;
+  max-width: calc(var(--content-max) + 64px);
+  margin: 0 auto;
+  padding: 24px 32px 64px;
+  flex: 1;
+}
+
+.app-views .view > .view-zone + .view-zone { margin-top: 20px; }
+.view-zone--band {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  align-items: start;
+}
+.view-zone--band > .scroll { margin: 0; }
+.view-zone:empty { display: none; }
+
+.app-foot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 4px 0;
+  margin-top: 24px;
+  border-top: 1px solid var(--border);
+  font-size: 12.5px;
+  color: var(--ink-faint);
+}
+.app-foot a { color: var(--ink-faint); }
+.app-foot a:hover { color: var(--ink); }
+.app-foot span { margin-right: auto; }
+
+.app-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-scrim);
+  background: color-mix(in srgb, var(--ink) 40%, transparent);
+}
+
+/* ---------- responsive shell (scope §10) ---------- */
+
+@media (max-width: 1024px) {
+  .app-sidebar { width: var(--sidebar-w-rail); }
+  .app-body { margin-left: var(--sidebar-w-rail); }
+  .brand-mark__name,
+  .nav-item__label,
+  .nav-group__head,
+  .shell-user__meta { display: none; }
+  .nav-item, .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; }
+  .shell-signin::after { content: "→"; font-size: 15px; }
+}
+
+@media (max-width: 768px) {
+  .app-sidebar {
+    width: var(--sidebar-w);
+    transform: translateX(-100%);
+    transition: transform 160ms ease;
+    z-index: var(--z-drawer);
+  }
+  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; }
+  .shell-user { justify-content: flex-start; }
+  .shell-signin { font-size: 13.5px; padding: 0 10px; }
+  .shell-signin::after { content: none; }
+  .topbar-menu { display: flex; }
+  .topbar-note { display: none; }
+  .app-content { padding: 16px 16px 48px; }
+  .view-zone--band { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 480px) {
+  .app-content { padding: 12px 10px 40px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
+}
+
+/* ---------- cards (the .scroll legacy name is load-bearing) ---------- */
+
+.scroll {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin: 0 0 20px;
+  /* anchor jumps must clear the 56px sticky top bar */
+  scroll-margin-top: calc(var(--topbar-h) + 16px);
+}
+.view-zone > .scroll:last-child { margin-bottom: 0; }
+.scroll--bare {
+  background: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.scroll__h {
+  margin: 0 0 6px;
+  font-family: var(--font-display);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.scroll__lede {
+  margin: 0 0 14px;
+  font-size: 13.5px;
+  color: var(--ink-soft);
+  max-width: 68ch;
+}
+.card-foot {
+  margin: 12px 0 0;
+  font-size: 13px;
+}
+
+.pill-link,
+#welcome-reopen a {
+  display: inline-block;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--ink-soft);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px;
+}
+#welcome-reopen { margin: 0; }
+.pill-link:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
+
+/* ---------- stat tiles (Home) ---------- */
+
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+.stat-tile {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  min-height: 88px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+}
+.stat-tile__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.stat-tile__num {
+  font-size: 26px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+.stat-tile__num--badge { font-size: 15px; }
+.stat-tile__sub { font-size: 12px; color: var(--ink-faint); }
+
+@media (max-width: 480px) {
+  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
+  .stat-tile { padding: 12px 14px; min-height: 72px; }
+  .stat-tile__num { font-size: 21px; }
+}
+
+/* ---------- Standing layout: section rail + panels ---------- */
+
+.standing-layout {
+  display: grid;
+  grid-template-columns: 168px minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+.section-rail {
+  position: sticky;
+  top: calc(var(--topbar-h) + 16px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.rail-link {
+  display: block;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-soft);
+}
+.rail-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
+.rail-link--active { background: var(--accent-weak); color: var(--accent-text); }
+
+@media (max-width: 768px) {
+  .standing-layout { grid-template-columns: minmax(0, 1fr); }
+  .section-rail {
+    position: sticky;
+    top: var(--topbar-h);
+    z-index: 5;
+    flex-direction: row;
+    overflow-x: auto;
+    gap: 6px;
+    padding: 8px 0;
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    backdrop-filter: blur(6px);
+  }
+  .rail-link { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
+  .rail-link--active { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+}
+
+/* ---------- legacy page chrome compat (pre-shell pages) ---------- */
+/* Pages adopt the shell one by one; until each does, its old header renders
+   as a plain page head, the epigraph is retired outright, and the old chip
+   strip reads as a neutral chip row. */
+
+.hall { padding: 8px 0 4px; margin: 0; max-width: none; text-align: left; }
+.hall__epigraph { display: none; }
+.hall h1 {
+  margin: 0 0 4px;
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.hall__sub { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
+.hall__nav { margin: 4px 0; font-size: 13.5px; }
+
+.page-head { margin: 4px 0 20px; }
+.page-head h1 {
+  margin: 0 0 4px;
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.page-head__sub { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
+
+.hall-nav {
+  position: sticky;
+  top: var(--topbar-h);
+  z-index: 5;
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(6px);
+  padding: 8px 0;
+  margin: 0 0 12px;
+}
+.hall-nav__inner { max-width: none; margin: 0; padding: 0; }
+.hall-nav__list {
+  list-style: none;
+  display: flex;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+}
+.hall-nav__chip {
+  display: inline-block;
+  white-space: nowrap;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--ink-soft);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px;
+}
+.hall-nav__chip:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
+.hall-nav__chip--active { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+.hall-nav__chip--welcome-dismissed { border-style: dashed; }
+
+main {
+  /* pre-shell pages have a bare <main>; inside the shell the .app-content
+     wrapper owns width, so this only bounds stragglers */
+  max-width: var(--content-max);
+  margin: 0 auto;
+}
+.app-content main { max-width: none; margin: 0; }
+
+.foot {
+  padding: 18px 4px;
+  margin-top: 24px;
+  border-top: 1px solid var(--border);
+  font-size: 12.5px;
+  color: var(--ink-faint);
+}
+.foot p { margin: 0; }
+.foot a { color: var(--ink-faint); }
+.foot a:hover { color: var(--ink); }
+
+/* generic sections keep anchor clearance under the sticky bar */
+main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
+
+/* ---------- ledger tables ---------- */
+
+.ledger {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13.5px;
+}
+.ledger th {
+  position: sticky;
+  top: var(--topbar-h);
+  background: var(--surface);
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-strong);
+  z-index: 1;
+}
+.ledger td {
+  padding: 12px;
+  border-bottom: 1px solid var(--rule-soft);
+  vertical-align: top;
+}
+.ledger tr:last-child td { border-bottom: none; }
+.ledger tbody tr:hover td { background: var(--surface-2); }
+/* task 1467: a builder name that links to their profile page reads as plain
+   text in the dense leaderboard/roster, revealing itself as a link on hover. */
+.lb-name { color: inherit; }
+.lb-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.ledger__empty {
+  color: var(--ink-faint);
+  font-size: 13px;
+  padding: 18px 12px !important;
+}
+.ledger__num {
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ledger__drachmae {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  white-space: nowrap;
+}
+/* task 1957 — "est." qualifier on a Done-tab row that is not yet settled
+   (a 'completed' task whose credits haven't landed). Muted + light so it reads
+   as a caveat on the number, not part of it. */
+.ledger__est {
+  font-weight: 400;
+  font-size: 0.82em;
+  font-style: italic;
+  color: var(--ink-soft);
+}
+.ledger__date { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.ledger__rank { white-space: nowrap; }
+.ledger__note { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
+.ledger th.ledger__sortable { cursor: pointer; user-select: none; }
+.ledger th.ledger__sortable:hover { color: var(--ink); }
+.ledger th.ledger__sortable[aria-sort="ascending"]::after { content: " ↑"; }
+.ledger th.ledger__sortable[aria-sort="descending"]::after { content: " ↓"; }
+
+/* ---------- filters / pager / buttons ---------- */
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px 14px;
+  margin: 0 0 14px;
+}
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.filter select {
+  min-width: 150px;
+  height: 32px;
+  padding: 4px 8px;
+  font-size: 13.5px;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+/* task 1829: the Work Board free-text search box, sized to match the filter
+   selects it sits alongside. */
+.filter input[type="search"] {
+  min-width: 200px;
+  height: 32px;
+  padding: 4px 8px;
+  font-size: 13.5px;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+.filter__count {
+  font-size: 12.5px;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--ink-faint);
+  margin-left: auto;
+  align-self: center;
+}
+
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+}
+.pager__range { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-soft);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); text-decoration: none; }
+.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* ---------- profile / standing ---------- */
+
+.profile {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: center;
+}
+.profile:has(.landing) { display: block; }
+.profile--compact { grid-template-columns: 48px minmax(0, 1fr); }
+.profile__avatar {
+  grid-row: span 1;
+  width: 64px; height: 64px;
+  border-radius: 50%;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  object-fit: cover;
+}
+.profile--compact .profile__avatar { width: 48px; height: 48px; }
+.profile__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.profile__name {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.profile__handle { margin: 1px 0 6px; font-size: 13px; color: var(--ink-faint); }
+.profile__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  font-size: 12.5px;
+  color: var(--ink-soft);
+}
+.profile__disciplines {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  margin-top: 6px;
+  font-size: 12.5px;
+  color: var(--ink-soft);
+}
+.profile__disc-label { color: var(--ink-faint); }
+.profile__disc-edit { font-size: 12.5px; }
+.profile__credits {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  text-align: right;
+}
+.profile__credits-num {
+  font-size: 26px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+}
+.profile__credits-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.profile__karma { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
+.profile__karma-num { font-weight: 600; font-variant-numeric: tabular-nums; }
+.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 {
+  grid-column: 1 / -1;
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  font-size: 13px;
+  border: 1px solid transparent;
+}
+.profile__budget--warn { background: var(--warn-weak); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
+.profile__budget--over { background: var(--danger-weak); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
+.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; }
+
+.disc-pref { margin-right: 4px; }
+
+@media (max-width: 640px) {
+  .profile { grid-template-columns: 48px minmax(0, 1fr); }
+  .profile__avatar { width: 48px; height: 48px; }
+  .profile__credits { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
+}
+
+/* ---------- rank badges + tooltip ---------- */
+
+.rank-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+.rank-badge--xenos { background: var(--surface-2); color: var(--ink-soft); border-color: var(--border-strong); }
+.rank-badge--thetes { background: var(--info-weak); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
+.rank-badge--metic { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
+.rank-badge--archon { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
+.rank-badge--unknown { background: none; color: var(--ink-faint); border: 1px dashed var(--border-strong); }
+
+.rank-badge-wrap { position: relative; display: inline-flex; }
+.rank-badge-stretch { position: absolute; inset: 0; z-index: 2; }
+.rank-tip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  min-width: 240px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  padding: 12px 14px;
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms ease;
+}
+.rank-badge-wrap:hover .rank-tip,
+.rank-badge-wrap:focus-within .rank-tip { opacity: 1; visibility: visible; }
+.rank-tip__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  margin: 0 0 6px;
+}
+.rank-tip__list { margin: 0; padding-left: 16px; }
+.rank-tip__list li { margin: 2px 0; }
+.rank-tip__more { margin: 6px 0 0; color: var(--ink-faint); }
+
+/* ---------- karma / acclaim ---------- */
+
+.karma-badge__trend { font-variant-numeric: tabular-nums; }
+.karma-badge__trend--up, .karma-feed__delta--up { color: var(--ok); }
+.karma-badge__trend--down, .karma-feed__delta--down { color: var(--danger); }
+.karma-badge__trend--flat, .karma-feed__delta--flat { color: var(--ink-faint); }
+.karma-feed__delta { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.acclaim__vote { display: inline-flex; gap: 4px; }
+.acclaim__btn {
+  width: 28px; height: 24px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 13px;
+  cursor: pointer;
+}
+.acclaim__btn:hover:not(:disabled) { background: var(--surface-2); }
+.acclaim__btn--up.is-active { background: var(--ok-weak); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
+.acclaim__btn--down.is-active { background: var(--danger-weak); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
+.acclaim__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.acclaim__readonly { color: var(--ink-faint); }
+.acclaim__net { font-weight: 600; font-variant-numeric: tabular-nums; }
+.acclaim__net--up { color: var(--ok); }
+.acclaim__net--down { color: var(--danger); }
+.acclaim__net--flat { color: var(--ink-faint); }
+
+/* ---------- achievements ---------- */
+
+.ach-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+}
+.ach {
+  display: flex;
+  gap: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+}
+.ach--locked { border-style: dashed; }
+.ach--locked .ach__icon { filter: grayscale(1); opacity: 0.45; }
+.ach--locked .ach__name { color: var(--ink-soft); }
+.ach__icon { font-size: 24px; line-height: 1.2; flex-shrink: 0; }
+.ach__body { min-width: 0; }
+.ach__name { font-weight: 600; font-size: 13.5px; margin: 0 0 2px; }
+.ach__desc { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
+.ach__bonus { font-size: 12px; color: var(--ok); font-weight: 600; margin: 4px 0 0; }
+.ach__progress { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; }
+
+.lb-ach-row { display: inline-flex; gap: 2px; margin-left: 6px; }
+.lb-ach { font-size: 12px; }
+
+/* ---------- dev curve ---------- */
+
+.curve__scope { display: inline-flex; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
+.curve__scope-btn {
+  border: none;
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.curve__scope-btn + .curve__scope-btn { border-left: 1px solid var(--border-strong); }
+.curve__scope-btn.is-active { background: var(--accent-weak); color: var(--accent-text); }
+
+.curve__headline {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  margin: 4px 0 16px;
+}
+.curve__stat {
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+}
+.curve__stat-value { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+.curve__stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-top: 2px; }
+.curve__stat-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
+
+.curve__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+.curve__chart {
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px 12px;
+}
+.curve__chart-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
+.curve__chart-empty { font-size: 12px; color: var(--ink-faint); }
+.curve__chart-foot { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
+.spark { width: 100%; height: 44px; display: block; }
+.spark__line { fill: none; stroke: var(--accent); stroke-width: 2; }
+.spark__area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
+
+.curve__kinds { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
+.curve__kind { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
+.curve__kind-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.curve__kind-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
+.curve__kind-fill { height: 100%; background: var(--accent); border-radius: 4px; }
+.curve__kind-n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+
+/* ---------- onboarding checklist ---------- */
+
+.onboarding-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.onboarding-item {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  gap: 4px 12px;
+  align-items: start;
+  padding: 12px 4px;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.onboarding-item:last-child { border-bottom: none; }
+.onboarding-item--placeholder { color: var(--ink-faint); }
+.onboarding-item__mark {
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  border: 1.5px solid var(--border-strong);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--ink-faint);
+  background: var(--surface);
+}
+.onboarding-item--cleared .onboarding-item__mark {
+  background: var(--ok);
+  border-color: var(--ok);
+  color: #fff;
+}
+.onboarding-item--current .onboarding-item__mark { border-color: var(--accent); color: var(--accent-text); }
+.onboarding-item--current { background: var(--accent-weak); border-radius: var(--radius-sm); padding-left: 10px; padding-right: 10px; border-bottom-color: transparent; }
+.onboarding-item--locked { opacity: 0.6; }
+.onboarding-item__body { min-width: 0; }
+.onboarding-item__label { font-weight: 600; font-size: 13.5px; }
+.onboarding-item--cleared .onboarding-item__label { color: var(--ink-soft); font-weight: 500; }
+.onboarding-item__hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
+.onboarding-item__detail { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
+.onboarding-item__detail code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
+.onboarding-item__action { align-self: center; }
+.onboarding-item__disc-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.onboarding-item__disc {
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.onboarding-item__disc:hover { background: var(--surface-2); }
+.onboarding-item__disc--on {
+  background: var(--accent-weak);
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+}
+.onboarding-item__discord { font-weight: 600; }
+
+@media (max-width: 560px) {
+  .onboarding-item { grid-template-columns: 26px minmax(0, 1fr); }
+  .onboarding-item__action { grid-column: 2; justify-self: start; }
+}
+
+/* ---------- welcome panel + setup selector ---------- */
+
+.scroll--welcome {
+  position: relative;
+  border-left: 3px solid var(--accent);
+}
+.scroll--welcome--minimized .welcome { display: none; }
+.welcome__minimize {
+  position: absolute;
+  top: 12px; right: 12px;
+  width: 26px; height: 26px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.welcome__minimize:hover { background: var(--surface-2); }
+.welcome__lede { font-size: 13.5px; color: var(--ink-soft); max-width: 70ch; }
+.welcome__unlocks { margin: 8px 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
+.welcome__cmd, .welcome__paste {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  overflow-x: auto;
+}
+
+.setup { margin-top: 12px; }
+.setup__intro { font-size: 13px; color: var(--ink-soft); }
+.setup__toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 12px; }
+.setup__tab {
+  border: none;
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 6px 14px;
+  cursor: pointer;
+}
+.setup__tab + .setup__tab { border-left: 1px solid var(--border-strong); }
+.setup__tab[aria-selected="true"] { background: var(--accent-weak); color: var(--accent-text); }
+.setup__tab-tag { font-size: 10.5px; margin-left: 6px; color: var(--ink-faint); }
+.setup__tab-tag--rec { color: var(--ok); font-weight: 600; }
+.setup__pane { display: none; }
+.setup[data-config="desktop"] .setup__pane--desktop { display: block; }
+.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; }
+.setup__steps code {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+.setup__hint { font-size: 12.5px; color: var(--ink-faint); }
+.setup__foot { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
+.setup__divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink-faint);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 12px 0;
+}
+.setup__divider::before, .setup__divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule-soft); }
+
+.setup__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: #fff;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.setup__btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; text-decoration: none; }
+.setup__btn:disabled, .setup__btn--open[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.setup__btn--box { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
+.setup__btn--box:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+.setup__btn--danger { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
+.setup__btn--danger:hover:not(:disabled) { background: var(--danger-weak); }
+
+.setup__box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; background: var(--surface-2); }
+.setup__box-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
+.setup__box-msg { font-size: 13px; margin: 6px 0; }
+.setup__box-msg--ok { color: var(--ok); }
+.setup__box-msg--warn { color: var(--warn); }
+.setup__box-msg--err { color: var(--danger); }
+.setup__box-out {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  max-height: 180px;
+  overflow: auto;
+}
+.setup__box-close { margin-left: auto; }
+.setup__box-close-hint { font-size: 12px; color: var(--ink-faint); }
+.setup__cred-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; flex-wrap: wrap; }
+.setup__cred-k { color: var(--ink-faint); min-width: 90px; }
+.setup__cred-v {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+.setup__copy {
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  padding: 3px 10px;
+  cursor: pointer;
+}
+.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; }
+.setup__getcode-lede { font-size: 12.5px; color: var(--ink-soft); }
+.setup__getcode-body { margin-top: 8px; }
+
+/* ---------- landing (signed-out) ---------- */
+
+.landing { max-width: 560px; }
+.landing__lede { font-size: 14px; color: var(--ink-soft); }
+.landing__cta { margin: 14px 0; }
+.landing__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: #fff;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.landing__btn:hover { background: var(--accent-deep); text-decoration: none; color: #fff; }
+.landing__note { font-size: 12.5px; color: var(--ink-faint); }
+.landing__error { color: var(--danger); }
+.landing__error-h { color: var(--danger); margin: 0 0 4px; font-size: 14px; }
+.landing__request {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  padding: 16px 18px;
+  margin: 16px 0;
+}
+.landing__request-h { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
+.landing__request-lede { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
+.landing__request-lede--soft { color: var(--ink-faint); }
+.landing__form { display: flex; flex-direction: column; gap: 10px; }
+.landing__field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
+.landing__field input { background: var(--surface); }
+.landing__req-mark { color: var(--danger); }
+.landing__opt { color: var(--ink-faint); font-weight: 400; }
+.landing__form-hint { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
+.landing__btn--request { align-self: flex-start; }
+.landing__request-status { font-size: 13px; margin: 0; color: var(--ok); }
+.landing__request-status[data-kind="err"] { color: var(--danger); }
+.landing__signin-note { font-size: 13px; color: var(--ink-soft); }
+
+/* ---------- goals ---------- */
+
+.goal-ring { flex-shrink: 0; }
+.goal-ring__label { font-size: 10px; font-weight: 600; fill: var(--ink-soft); font-family: var(--font-body); }
+.goal-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.goal-badge--open { background: var(--info-weak); color: var(--info); }
+.goal-badge--achieved { background: var(--ok-weak); color: var(--ok); }
+.goal-badge--archived { background: var(--surface-2); color: var(--ink-faint); }
+/* task 1761: a goal blocked until a prerequisite goal is achieved. */
+.goal-badge--blocked { background: var(--warn-weak); color: var(--warn); }
+.goal-empty { font-size: 13.5px; color: var(--ink-soft); }
+.goal-mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.goal-mine {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.goal-mine:last-child { border-bottom: none; }
+.goal-mine__ring { display: flex; }
+.goal-mine__title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; }
+.goal-mine__meta { display: flex; align-items: center; gap: 8px; }
+.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) ---------- */
+
+.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.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);
+  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. */
+.task__open {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--ink-faint);
+  font-size: 12px;
+  line-height: 1;
+  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__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;
+  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__copy {
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.task__copy:hover { background: var(--surface-2); }
+.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; }
+
+@media (max-width: 640px) {
+  .task { grid-template-columns: auto minmax(0, 1fr); }
+  .task__credits { grid-column: 2; text-align: left; }
+}
+
+/* ---------- ranks page ---------- */
+
+.ranks-standing {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 14px;
+  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__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);
+  border-radius: var(--radius);
+  padding: 14px 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; }
+.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__status {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.rank-card__status--current { color: var(--accent-text); }
+.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--sealed { font-style: italic; }
+.rank-card__unlocks-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  margin: 8px 0 4px;
+}
+.rank-card__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
+.rank-card__list li { margin: 2px 0; }
+.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 {
+  position: fixed;
+  left: 50%;
+  bottom: 32px;
+  transform: translate(-50%, 12px);
+  z-index: 100;
+  background: var(--ink);
+  color: var(--bg-card);
+  font-size: 13.5px;
+  padding: 10px 18px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 140ms ease, transform 140ms ease;
+  max-width: min(90vw, 480px);
+}
+.toast[data-visible="1"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
+
+#copy-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 1000;
+  background: var(--ink);
+  color: var(--bg-card);
+  font-size: 13px;
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 140ms ease;
+}
+#copy-toast[data-visible="1"] { opacity: 1; visibility: visible; }
+
+.deeplink-card {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: color-mix(in srgb, var(--ink) 45%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+.deeplink-card__panel {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  max-width: 560px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 22px 24px;
+}
+.deeplink-card__close {
+  position: absolute;
+  top: 10px; right: 10px;
+  width: 28px; height: 28px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.deeplink-card__close:hover { background: var(--surface-2); }
+.deeplink-card__kind {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  margin: 0 0 4px;
+}
+.deeplink-card__title { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
+.deeplink-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
+.deeplink-card__summary { font-size: 13.5px; margin: 0 0 10px; }
+.deeplink-card__note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
+.deeplink-card__link { font-size: 13px; }
+/* task 1753: the deepened TASK body inside the shared record overlay. */
+.td-goal { font-size: 13px; margin: 0 0 10px; }
+.td-desc {
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  max-height: 42vh;
+  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; }
+.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; }
+.td-dep:hover { text-decoration: underline; }
+.td-dep-status { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }
+.td-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
+.td-btn {
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+.td-btn:hover { background: var(--surface-2); }
+.td-btn--primary { background: var(--accent); color: #fff; border-color: transparent; }
+.td-btn--primary:hover { background: var(--accent-deep); }
+.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; }
+
+/* ---------- misc shared bits ---------- */
+
+.vgoal { border: 1px solid var(--border); border-radius: var(--radius); }
+
+/* primer's article images should never overflow its column */
+.primer-article img { max-width: 100%; }
+
+/* Start-a-project wizard (new-project-wizard.js, provisioning module, task 1983) */
+.np-form { display: grid; gap: 0.75rem; max-width: 32rem; margin-top: 0.5rem; }
+.np-field { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--ink-soft); }
+.np-field input { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--ink); font: inherit; }
+.np-field input:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
+.np-error { color: var(--danger); font-size: 0.9rem; min-height: 1.2em; margin: 0; }
+.np-create-btn { justify-self: start; padding: 0.55rem 1.1rem; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
+.np-create-btn:hover:not(:disabled) { background: var(--accent-deep); }
+.np-create-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.np-steps { display: grid; gap: 0.6rem; padding-left: 1.2rem; margin: 0.5rem 0; }
+.np-kv { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0.25rem; flex-wrap: wrap; }
+.np-kv span { color: var(--ink-faint); font-size: 0.85rem; min-width: 12rem; }
+.np-kv code, .np-steps code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 4px; word-break: break-all; }
+.np-done { margin-top: 0.5rem; }