bedrock-flows 0.7.1

package/template/apps/dashboard/src/App.module.css

@@ -0,0 +1,1318 @@
+/* Dashboard styles. All chrome surfaces read from --dash-* tokens defined
+   in src/index.css; @media (prefers-color-scheme: dark) flips them. The
+   status badges have their own dark overrides at the bottom because
+   they're semantic-color pills, not chrome. */
+
+.page {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* App brand at the top of the sidebar (replaces the old top bar). */
+.sidebarBrand {
+  padding: 4px 12px 18px;
+}
+
+/* Full-width top bar: optional mobile sidebar toggle · title + info ·
+   user pill (pushed right by .headerMain flex:1). Sticky so it stays
+   while the main column scrolls. */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  background: var(--dash-bg, #fff);
+  border-bottom: 1px solid var(--dash-border);
+}
+.headerMain { flex: 1; min-width: 0; }
+
+/* Mobile-only top bar: sidebar toggle on the left + current-tab title
+   centered. Replaces the earlier floating FAB toggle so users know
+   which section they're in. Hidden ≥860px; shown via media query below. */
+.mobileTopBar {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--dash-bg, #fff);
+  border-bottom: 1px solid var(--dash-border);
+  position: sticky;
+  top: 0;
+  /* Above the full-screen mobile sidebar (z-40) so its toggle stays tappable
+     to close the sidebar even when it takes over the screen. */
+  z-index: 60;
+}
+.mobileTopBarTitle {
+  flex: 1;
+  margin: 0;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--dash-text);
+  /* Reserve symmetric space against the 36px toggle so the title is
+     visually centered in the bar. */
+  padding-right: 36px;
+}
+.sidebarToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--dash-border);
+  border-radius: 8px;
+  background: var(--dash-surface);
+  color: var(--dash-text);
+  cursor: pointer;
+}
+.sidebarToggle:hover { background: var(--dash-surface-alt, var(--dash-surface)); }
+
+/* Body: sidebar + scrollable main. */
+.shell {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.sidebar {
+  flex: none;
+  width: 224px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 24px 12px 16px;
+  border-right: 1px solid var(--dash-border);
+}
+
+.navBtn {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--dash-text-muted);
+  cursor: pointer;
+}
+.navIcon {
+  flex: none;
+  color: var(--dash-text-muted);
+}
+.navBtn:hover .navIcon,
+.navBtnActive .navIcon {
+  color: var(--dash-text);
+}
+.navLabel {
+  flex: 1;
+}
+.navBadge {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dash-text-muted);
+}
+.navBtnActive .navBadge {
+  color: var(--dash-text);
+}
+.navBtn:hover { color: var(--dash-text); background: var(--dash-surface); }
+.navBtnActive,
+.navBtnActive:hover {
+  color: var(--dash-text);
+  background: var(--dash-surface);
+}
+
+/* Sidebar section header (e.g. "Wireflows") above a group of nav items. */
+.navSectionLabel {
+  padding: 6px 12px 2px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--dash-text-muted);
+}
+/* Thin separator between nav groups. */
+.navSep {
+  height: 1px;
+  margin: 8px 12px;
+  background: var(--dash-border);
+}
+
+/* Top-bar sidebar toggle (shadcn-style) — collapse/expand the sidebar. */
+.topbarToggle {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 30px;
+  height: 30px;
+  margin-right: 4px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: none;
+  color: var(--dash-text-muted);
+  cursor: pointer;
+}
+.topbarToggle:hover { background: var(--dash-surface); color: var(--dash-text); }
+
+/* Collapsed (desktop): hide the sidebar so the content column fills the
+   width. Scoped to desktop in the min-width media query below — on mobile the
+   sidebar is driven by the hamburger, not the collapse state. */
+
+/* Content column (right of the sidebar): a full-width column holding the
+   module top bar (spans the whole browser width) above the centred main. */
+.contentCol {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  /* Generous cap so the flows table uses the space on wide screens
+     instead of wrapping the Feature Name column; still centred and
+     readable on ultra-wide displays. */
+  width: 100%;
+  max-width: 1500px;
+  align-self: center;
+  padding: 28px 32px 96px;
+  box-sizing: border-box;
+}
+
+/* Module top bar — every module (Flows, Design systems, Resolution queue)
+   gets one so it's always clear where you are. Mirrors the Ziptility desktop
+   top-bar: a full-width bar (spans the whole browser width right of the
+   sidebar) with the title + optional info and a bottom border. Hidden on
+   mobile, where the dedicated .mobileTopBar already shows the module title. */
+.pageTopbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 18px 32px;
+  border-bottom: 1px solid var(--dash-border);
+}
+
+.pageTopbarTitle {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0;
+  color: var(--dash-text);
+}
+
+/* Mobile drawer backdrop. */
+.scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 35;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+/* User menu — pill that opens a dropdown with sign-out. */
+.userMenu { position: relative; flex: none; }
+.userPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px 6px 6px;
+  border: 1px solid var(--dash-border);
+  border-radius: 999px;
+  background: var(--dash-surface);
+  font-size: 13px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--dash-text);
+  cursor: pointer;
+}
+.userPill:hover { background: var(--dash-surface-alt, var(--dash-surface)); }
+/* Caret sits flush right (justified to the pill edge), slightly larger
+   so it reads as the expand affordance rather than a tiny decoration. */
+.userCaret { margin-left: auto; opacity: 0.7; flex: none; transition: transform 0.15s ease; }
+.userCaretOpen { transform: rotate(180deg); }
+.userPanel {
+  position: absolute; top: calc(100% + 6px); right: 0;
+  min-width: 200px;
+  padding: 6px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
+  z-index: 50;
+  display: flex; flex-direction: column; gap: 2px;
+}
+
+/* User pill pinned to the bottom of the sidebar. Full-width trigger;
+   its dropdown opens upward (there's no room below at the bottom). */
+.sidebarUser {
+  margin-top: auto;
+  padding-top: 16px;
+}
+.sidebarUser .userMenu { width: 100%; }
+.sidebarUser .userPill { width: 100%; }
+.sidebarUser .userPanel {
+  top: auto;
+  bottom: calc(100% + 6px);
+  left: 0;
+  right: 0;
+}
+.userPanelMeta {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--dash-text-muted);
+  border-bottom: 1px solid var(--dash-border);
+  margin-bottom: 4px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.userPanelItem {
+  display: flex; align-items: center; gap: 6px;
+  padding: 7px 10px;
+  background: transparent; border: 0;
+  color: var(--dash-text);
+  font: inherit; font-size: 13px;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.userPanelItem:hover { background: var(--dash-surface-alt, var(--dash-border)); }
+.userPanelLabel {
+  padding: 6px 10px 2px;
+  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dash-text-muted);
+}
+.themeToggle {
+  display: flex; gap: 2px;
+  margin: 0 8px 4px;
+  padding: 2px;
+  background: var(--dash-surface-alt);
+  border: 1px solid var(--dash-border);
+  border-radius: 7px;
+}
+.themeOption {
+  flex: 1; padding: 5px 6px;
+  background: transparent; border: 0; border-radius: 5px;
+  color: var(--dash-text-muted);
+  font: inherit; font-size: 12px;
+  cursor: pointer;
+}
+.themeOption:hover { color: var(--dash-text); }
+.themeOptionActive,
+.themeOptionActive:hover {
+  background: var(--dash-surface);
+  color: var(--dash-text);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+}
+.userAvatar,
+.userAvatarFallback {
+  width: 28px; height: 28px;
+  border-radius: 999px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 600;
+  background: var(--dash-link);
+  color: white;
+  overflow: hidden;
+}
+.userAvatar { object-fit: cover; }
+.userName {
+  max-width: 180px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--dash-text);
+}
+
+/* Auth gate overlay — markup in App.tsx <AuthGate/>, styling from the shared
+   /auth-gate.css (bf-auth-* classes; loaded via index.html). One stylesheet
+   for the dashboard, wireflow, and screen gates. */
+
+.title {
+  font-size: 17px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.01em;
+  color: var(--dash-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Running-release badge under the brand title — text comes from the latest
+   CHANGELOG.md heading at build time. Clicking opens the changelog tab. */
+.versionPill {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border: 1px solid var(--dash-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dash-text-muted);
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+}
+.versionPill:hover,
+.versionPill:focus-visible {
+  color: var(--dash-text);
+  border-color: var(--dash-border-strong);
+  background: var(--dash-surface);
+  outline: none;
+}
+.versionPillActive {
+  color: var(--dash-text);
+  border-color: var(--dash-border-strong);
+  background: var(--dash-surface);
+}
+
+/* Changelog page — CHANGELOG.md rendered in-app (see src/changelog.tsx). */
+.changelog { max-width: 720px; }
+.changelog a { color: inherit; }
+.changelogNote {
+  margin: 10px 0;
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--dash-text-muted);
+}
+.changelogVersion {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin: 30px 0 4px;
+  padding-top: 22px;
+  border-top: 1px solid var(--dash-border);
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--dash-text);
+  font-variant-numeric: tabular-nums;
+}
+.changelog .changelogVersion:first-of-type {
+  margin-top: 14px;
+  padding-top: 0;
+  border-top: 0;
+}
+.changelogCurrent {
+  align-self: center;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border-strong);
+  color: var(--dash-text);
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.changelogDate {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--dash-text-muted);
+}
+.changelogGroup {
+  margin: 18px 0 6px;
+  font-size: 11.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--dash-text-muted);
+}
+.changelogList {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--dash-text);
+}
+.changelogList li + li { margin-top: 6px; }
+.changelogList code,
+.changelogNote code {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  font-size: 12px;
+}
+
+/* Compact "i" affordance next to the title — replaces the always-visible
+   subtitle paragraph. Hover or focus reveals the info panel. */
+.titleInfo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Ghost button: 24×24 hit target around a 16×16 circle-info glyph,
+     no border at rest. Transparent background; a faint slate surface
+     appears only on hover/focus. */
+  width: 24px; height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dash-text-muted);
+  cursor: help;
+  /* Kill the browser's default 2px black focus ring; the hover/focus
+     background below is the affordance. */
+  outline: none;
+}
+.titleInfo > svg { display: block; flex: none; }
+.titleInfo:hover,
+.titleInfo:focus-visible {
+  color: var(--dash-text);
+  background: var(--dash-surface);
+  outline: none;
+}
+.titleInfo:focus { outline: none; }
+.titleInfoPanel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  padding: 12px 14px;
+  background: var(--dash-surface);
+  color: var(--dash-text-muted);
+  border: 1px solid var(--dash-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  /* Not `inherit` — the .titleInfo badge is intentionally serif-italic
+     (the "i" glyph); the panel must use the dashboard's sans stack. */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+  z-index: 10;
+  display: none;
+}
+/* Transparent bridge spanning the 8px gap between the badge and the
+   panel. Without it the pointer drops :hover while crossing the gap and
+   the panel closes before you can reach the link inside it. */
+.titleInfoPanel::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -8px;
+  height: 8px;
+}
+.titleInfo:hover .titleInfoPanel,
+.titleInfo:focus-visible .titleInfoPanel,
+.titleInfo:focus-within .titleInfoPanel {
+  display: block;
+}
+.titleInfoPanel a {
+  color: var(--dash-link);
+  text-decoration: none;
+}
+.titleInfoPanel a:hover {
+  text-decoration: underline;
+}
+
+.sectionTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dash-text-muted);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin: 0 0 12px;
+}
+
+.dsSection {
+  margin-bottom: 40px;
+}
+
+.dsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.dsItem {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  column-gap: 16px;
+  row-gap: 12px;
+  align-items: center;
+  padding: 18px 20px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  border-radius: 10px;
+  font-size: 14px;
+}
+/* No :hover on .dsItem — the card itself isn't interactive; only the
+   "Open storybook" link (.dsLink) is. Don't give non-interactive
+   containers hover affordances. */
+/* Row 1: name+count on the left, "Open …" on the right.
+   Row 2: chips span the full card width. */
+.dsItem > :first-child {
+  grid-column: 1;
+  grid-row: 1;
+}
+.dsItem .dsLink {
+  grid-column: 2;
+  grid-row: 1;
+}
+.dsItem .dsComponents {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.dsVersion {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-weight: 600;
+  color: var(--dash-text);
+  text-decoration: none;
+}
+
+.dsVersion:hover { text-decoration: underline; }
+
+.dsCount {
+  margin-left: 10px;
+  color: var(--dash-text-muted);
+  font-size: 12.5px;
+}
+
+.dsComponents {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.dsChip {
+  display: inline-block;
+  padding: 2px 9px;
+  font-size: 11.5px;
+  background: var(--dash-surface-alt);
+  color: var(--dash-text-muted);
+  border-radius: 999px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  text-decoration: none;
+  transition: color 0.15s, background 0.15s;
+}
+
+a.dsChip:hover {
+  color: var(--dash-text);
+  background: var(--dash-border);
+}
+
+/* Small numeric badge inside a base-page chip showing how many state
+   variants share that base (e.g. `invite-dialog +3`). Sits inline with
+   the label so the chip stays a single visual unit. */
+.dsChipBadge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--dash-border);
+  color: var(--dash-text);
+  border-radius: 999px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.dsLink {
+  color: var(--dash-link);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.dsLink:hover { text-decoration: underline; }
+
+.muted {
+  color: var(--dash-text-muted);
+  font-size: 14px;
+}
+
+.error {
+  color: #b91c1c;
+  font-size: 14px;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.table thead th {
+  text-align: left;
+  font-weight: 500;
+  background: transparent;
+  color: var(--dash-text-muted);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--dash-border);
+}
+
+.table tbody td {
+  padding: 14px 14px;
+  border-bottom: 1px solid var(--dash-table-divider);
+  /* Top-align so the first line of every column lines up across the row —
+     feature names wrap to 2–3 lines, so middle-align left single-line cells
+     (F-ID, status, references) floating out of alignment with each other. */
+  vertical-align: top;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr:hover {
+  background: var(--dash-table-row-hover);
+}
+
+.colId {
+  width: 80px;
+}
+
+.colDs {
+  width: 60px;
+}
+
+.colStatus {
+  width: 160px;
+}
+
+/* Merged References column: DS + Figma stacked vertically.
+   Each row is a small flex with a left-aligned icon so the kind of
+   reference reads instantly without a separate column header. */
+.colRefs {
+  width: 220px;
+}
+.refsCell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.35;
+}
+.refRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.refIcon {
+  flex: none;
+  color: var(--dash-text-muted);
+}
+
+.colComments {
+  width: 100px;
+}
+
+.tsetEmpty {
+  color: var(--dash-border-strong);
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--dash-border);
+  margin-bottom: 20px;
+}
+
+.tab {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 10px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--dash-text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.tab:hover { color: var(--dash-text); }
+
+.tabActive {
+  color: var(--dash-text);
+  border-bottom-color: var(--dash-text);
+}
+
+.statusBadge {
+  display: inline-block;
+  padding: 2px 9px;
+  font-size: 12px;
+  border-radius: 999px;
+  font-weight: 500;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.statusTodo {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.statusValidate {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.statusWip {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.statusReady {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.colLinks {
+  width: 180px;
+}
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  color: var(--dash-text);
+}
+
+.dsCell {
+  color: var(--dash-link);
+  text-decoration: none;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.dsCell:hover { text-decoration: underline; }
+
+.featureLink {
+  color: var(--dash-link);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.featureLink:hover {
+  text-decoration: underline;
+}
+
+/* Version pill next to the F-ID on flows that have more than one version
+   (e.g. "v2"). Makes multi-version flows obvious at a glance in the main
+   list. Hover title spells out "Version N of M". */
+.versionBadge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--dash-text-muted);
+  background: var(--dash-border);
+  border-radius: 999px;
+  vertical-align: middle;
+}
+
+/* Version backlink shown under the feature name on a superseding version
+   ("supersedes F-001"). Subtle — it's provenance, not a primary action. */
+.supersedesLine {
+  display: block;
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: var(--dash-text-muted);
+}
+
+.supersedesLine a {
+  color: var(--dash-text-muted);
+  text-decoration: none;
+}
+
+.supersedesLine a:hover { text-decoration: underline; }
+
+/* "replaced by …" forward link on an archived row. */
+.replacedByLink {
+  color: var(--dash-link);
+  text-decoration: none;
+}
+
+.replacedByLink:hover { text-decoration: underline; }
+
+.commentCount {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 7px 1px 6px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: #475569;
+  background: #f1f5f9;
+  border-radius: 999px;
+  vertical-align: middle;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 120ms, color 120ms;
+}
+.commentCount:hover {
+  background: #e2e8f0;
+  color: #1e293b;
+}
+
+.commentCount svg {
+  opacity: 0.7;
+}
+
+/* `.links` cells gap their inner anchors via inline whitespace + a small
+   margin instead of `display: flex`, because a flex `<td>` stops
+   participating in the table's row-baseline alignment and pushes its
+   contents to the bottom of the row, which made every brief link appear
+   to belong to the next row. */
+.links {
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+.links a + a { margin-left: 12px; }
+
+.links a {
+  color: var(--dash-text-muted);
+  text-decoration: none;
+}
+
+.links a:hover {
+  color: var(--dash-text);
+  text-decoration: underline;
+}
+
+/* Dark mode tweaks for the semantic-color pills (status badges). The
+   light-bg/dark-text combos look bleached on a dark surface, so invert
+   to dark-bg/bright-text variants while keeping the hue. */
+@media (prefers-color-scheme: dark) {
+  :global(:root:not([data-theme='light'])) .statusBadge { background: #1e293b; color: #cbd5e1; }
+  :global(:root:not([data-theme='light'])) .statusTodo { background: #1e293b; color: #94a3b8; }
+  :global(:root:not([data-theme='light'])) .statusValidate { background: #422006; color: #fcd34d; }
+  :global(:root:not([data-theme='light'])) .statusWip { background: #1e3a8a; color: #93c5fd; }
+  :global(:root:not([data-theme='light'])) .statusReady { background: #14532d; color: #86efac; }
+  :global(:root:not([data-theme='light'])) .error { color: #fca5a5; }
+  /* Comments pill: in light it's a slate-100 chip; in dark the bright
+     pill stands out too much — drop the chip background, keep just the
+     icon + number in a muted slate so it blends with the row. */
+  :global(:root:not([data-theme='light'])) .commentCount {
+    background: transparent;
+    color: #94a3b8;
+  }
+  :global(:root:not([data-theme='light'])) .commentCount:hover {
+    background: #1e293b;
+    color: #e2e8f0;
+  }
+}
+:global(:root[data-theme='dark']) .statusBadge { background: #1e293b; color: #cbd5e1; }
+:global(:root[data-theme='dark']) .statusTodo { background: #1e293b; color: #94a3b8; }
+:global(:root[data-theme='dark']) .commentCount { background: transparent; color: #94a3b8; }
+:global(:root[data-theme='dark']) .commentCount:hover { background: #1e293b; color: #e2e8f0; }
+:global(:root[data-theme='dark']) .statusValidate { background: #422006; color: #fcd34d; }
+:global(:root[data-theme='dark']) .statusWip { background: #1e3a8a; color: #93c5fd; }
+:global(:root[data-theme='dark']) .statusReady { background: #14532d; color: #86efac; }
+:global(:root[data-theme='dark']) .error { color: #fca5a5; }
+
+/* On narrow viewports the dashboard reflows from "fits a desktop" to
+   "single-column phone-friendly". The page padding shrinks, the tabs
+   wrap if needed, and the DS cards collapse from their
+   3-column layout to a single column with the chip cloud sitting under
+   the title (instead of squeezed in the middle). */
+@media (max-width: 860px) {
+  /* Stop the page being a flex ROW here — otherwise the now-visible
+     .mobileTopBar becomes a flex item, stretches full-height and squishes
+     to content width on the left. Block layout lets the sticky top bar span
+     full width on top, with the off-canvas sidebar + content stacked below. */
+  .page { display: block; }
+  /* Sidebar collapses to an off-canvas drawer; the mobile top bar
+     hosts the toggle and the current tab title. */
+  .mobileTopBar { display: flex; }
+  /* The mobile top bar already shows the module title, so hide the
+     desktop module top bar to avoid a duplicate heading. */
+  .pageTopbar { display: none; }
+  .sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 40;
+    /* Mobile: the sidebar takes over the full screen when toggled open.
+       Top padding clears the sticky mobile top bar (which stays above it,
+       z-60, so its toggle still closes the sidebar). */
+    width: 100%;
+    max-width: 100vw;
+    background: var(--dash-bg, #fff);
+    border-right: 0;
+    padding-top: 60px;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+  .sidebarOpen { transform: translateX(0); }
+}
+@media (min-width: 861px) {
+  /* Desktop: no mobile top bar, no toggle. */
+  .sidebarToggle { display: none; }
+  /* Collapsed: hide the sidebar; the content column + full-width top bar fill. */
+  .pageCollapsed .sidebar { display: none; }
+  /* Lock the shell to the viewport so the sidebar stays full-height (its
+     bottom-pinned user pill is always visible) and only the main column
+     scrolls — instead of the whole page growing and pushing the user pill
+     below the fold. Scoped to desktop; the mobile drawer keeps body scroll. */
+  .page { height: 100vh; overflow: hidden; }
+  .main { overflow-y: auto; }
+}
+
+@media (max-width: 720px) {
+  .main { padding: 24px 16px 64px; }
+  .title { font-size: 20px; }
+  .subtitle { font-size: 13px; }
+
+  .tabs { flex-wrap: wrap; gap: 0; }
+  .tab { padding: 8px 10px; font-size: 13px; }
+
+  .dsItem {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+    gap: 8px;
+    padding: 12px 14px;
+  }
+  /* Reset the desktop two-row grid placements so children stack
+     vertically in source order on narrow viewports. */
+  .dsItem > :first-child,
+  .dsItem .dsLink,
+  .dsItem .dsComponents {
+    grid-column: auto;
+    grid-row: auto;
+  }
+  .dsItem > :first-child {
+    display: flex; flex-direction: column; gap: 2px;
+  }
+  .dsCount { margin-left: 0; }
+  .dsLink { justify-self: start; }
+  .dsComponents { gap: 4px; }
+  .dsChip { padding: 2px 8px; font-size: 11px; }
+}
+
+/* Responsive list view: on narrow screens collapse the prototypes table
+   into one stacked card per row. The header row is hidden, each <td>
+   gets a leading "label: " prefix from a data attribute set in the
+   markup, and the row reflows as a flex column. Avoids horizontal scroll
+   on phones/iPads. */
+@media (max-width: 720px) {
+  .table, .table thead, .table tbody, .table tr, .table td {
+    display: block;
+    width: 100%;
+  }
+  .table thead { display: none; }
+  .table {
+    border: 0; background: transparent;
+    border-radius: 0;
+  }
+  .table tbody tr {
+    background: var(--dash-surface);
+    border: 1px solid var(--dash-border);
+    border-radius: 8px;
+    margin-bottom: 12px;
+    padding: 8px 12px;
+  }
+  .table tbody tr:hover { background: var(--dash-surface); }
+  .table tbody td {
+    padding: 6px 0;
+    border-bottom: none;
+    display: flex;
+    gap: 12px;
+    align-items: baseline;
+  }
+  .table tbody td::before {
+    content: attr(data-label);
+    flex: 0 0 96px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--dash-text-muted);
+    font-weight: 600;
+  }
+  /* The feature-name cell is the headline of each card — no label, larger
+     font, sits at top. */
+  .table tbody td.featureNameCell {
+    padding: 4px 0 8px;
+    border-bottom: 1px solid var(--dash-table-divider);
+    margin-bottom: 4px;
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-start;
+  }
+  .table tbody td.featureNameCell::before { display: none; }
+  .table tbody td.featureNameCell .featureLink { font-size: 15px; }
+}
+
+/* Draft-features intake (Tyler spec-intake). */
+.draftForm {
+  display: flex; flex-direction: column; gap: 10px;
+  max-width: 720px;
+  margin-bottom: 28px;
+  padding: 16px;
+  background: var(--dash-surface);
+  border: 1px solid var(--dash-border);
+  border-radius: 10px;
+}
+.draftFormTitle { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--dash-text); }
+.draftFormRow { display: flex; gap: 10px; }
+.draftFormRow .draftInput { flex: 1; }
+.draftInput,
+.draftTextarea {
+  width: 100%; box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid var(--dash-border-strong);
+  border-radius: 6px;
+  font: inherit; font-size: 13px;
+  background: var(--dash-surface-alt); color: var(--dash-text);
+}
+.draftTextarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.draftSubmit {
+  align-self: flex-start;
+  padding: 8px 16px;
+  background: var(--dash-table-head-bg); color: var(--dash-table-head-text);
+  border: 0; border-radius: 6px;
+  font: inherit; font-size: 13px; font-weight: 600;
+  cursor: pointer;
+}
+.draftSubmit:disabled { opacity: 0.6; cursor: default; }
+.draftSpec {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  background: var(--dash-code-bg);
+  border-radius: 6px;
+  font-size: 12px; line-height: 1.5;
+  white-space: pre-wrap; word-break: break-word;
+  color: var(--dash-text);
+  max-height: 220px; overflow-y: auto;
+}
+
+/* Draft markdown editor — Write / Preview toggle. */
+.draftEditor {
+  border: 1px solid var(--dash-border-strong);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--dash-surface-alt);
+}
+.draftEditorTabs {
+  display: flex; align-items: center; gap: 2px;
+  padding: 6px 6px 0;
+  border-bottom: 1px solid var(--dash-border);
+}
+.draftEditorTab {
+  padding: 6px 12px;
+  background: transparent; border: 0;
+  border-radius: 6px 6px 0 0;
+  color: var(--dash-text-muted);
+  font: inherit; font-size: 12px; font-weight: 500;
+  cursor: pointer;
+}
+.draftEditorTab:hover { color: var(--dash-text); }
+.draftEditorTabActive,
+.draftEditorTabActive:hover {
+  background: var(--dash-surface);
+  color: var(--dash-text);
+}
+.draftEditorHint {
+  margin-left: auto; padding-right: 8px;
+  font-size: 11px; color: var(--dash-text-muted);
+}
+.draftEditor .draftTextarea {
+  border: 0; border-radius: 0; background: var(--dash-surface);
+}
+.draftPreview,
+.draftSpec {
+  padding: 14px 16px;
+  background: var(--dash-surface);
+  color: var(--dash-text);
+  font-size: 14px; line-height: 1.6;
+}
+.draftSpec {
+  margin: 8px 0 0;
+  border: 1px solid var(--dash-border);
+  border-radius: 6px;
+  max-height: 360px; overflow-y: auto;
+}
+.draftPreview { min-height: 200px; max-height: 420px; overflow-y: auto; }
+.draftPreview :first-child,
+.draftSpec :first-child { margin-top: 0; }
+.draftPreview :last-child,
+.draftSpec :last-child { margin-bottom: 0; }
+.draftPreview h1, .draftSpec h1 { font-size: 20px; }
+.draftPreview h2, .draftSpec h2 { font-size: 16px; margin-top: 18px; }
+.draftPreview h3, .draftSpec h3 { font-size: 14px; margin-top: 14px; }
+.draftPreview code, .draftSpec code {
+  background: var(--dash-code-bg); padding: 1px 5px; border-radius: 4px;
+  font-size: 0.9em;
+}
+.draftPreview pre, .draftSpec pre {
+  background: var(--dash-code-bg); padding: 10px 12px; border-radius: 6px;
+  overflow-x: auto;
+}
+.draftPreview a, .draftSpec a { color: var(--dash-link); }
+
+/* Lean contenteditable rich-text editor (draft specs). */
+.rte {
+  border: 1px solid var(--dash-border-strong);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--dash-surface);
+}
+.rteToolbar {
+  display: flex; flex-wrap: wrap; gap: 2px;
+  padding: 6px;
+  border-bottom: 1px solid var(--dash-border);
+  background: var(--dash-surface-alt);
+}
+.rteBtn {
+  min-width: 28px; padding: 4px 8px;
+  background: transparent; border: 1px solid transparent;
+  border-radius: 5px;
+  color: var(--dash-text-muted);
+  font: inherit; font-size: 12px; font-weight: 600;
+  cursor: pointer;
+}
+.rteBtn:hover { background: var(--dash-surface); color: var(--dash-text); border-color: var(--dash-border); }
+.rteSurface {
+  padding: 14px 16px;
+  min-height: 240px; max-height: 480px; overflow-y: auto;
+  font-size: 14px; line-height: 1.6;
+  color: var(--dash-text);
+  outline: none;
+}
+.rteSurface:empty::before {
+  content: attr(data-placeholder);
+  color: var(--dash-text-muted);
+}
+.rteSurface :first-child { margin-top: 0; }
+.rteSurface h2 { font-size: 16px; margin: 18px 0 6px; }
+.rteSurface h3 { font-size: 14px; margin: 14px 0 6px; }
+.rteSurface a { color: var(--dash-link); }
+.rteSurface ul, .rteSurface ol { padding-left: 22px; }
+
+/* Full-screen draft composer. */
+.draftOverlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: var(--dash-bg);
+  display: flex; flex-direction: column;
+  padding: 20px 24px 24px;
+}
+.draftFull {
+  display: flex; flex-direction: column; gap: 12px;
+  width: 100%; max-width: 1000px; height: 100%;
+  margin: 0 auto;
+}
+.draftFullHead {
+  display: flex; align-items: center; gap: 10px;
+  flex-wrap: wrap;
+}
+.draftFullFid {
+  width: 110px;
+  padding: 8px 10px;
+  border: 1px solid var(--dash-border-strong);
+  border-radius: 6px;
+  font: inherit; font-size: 14px; font-weight: 600;
+  background: var(--dash-surface-alt); color: var(--dash-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.draftFullName {
+  flex: 1; min-width: 200px;
+  padding: 8px 10px;
+  border: 1px solid var(--dash-border-strong);
+  border-radius: 6px;
+  font: inherit; font-size: 16px; font-weight: 600;
+  background: var(--dash-surface-alt); color: var(--dash-text);
+}
+.draftFullActions { display: flex; gap: 8px; margin-left: auto; }
+.draftCancel {
+  padding: 8px 16px;
+  background: transparent; color: var(--dash-text-muted);
+  border: 1px solid var(--dash-border); border-radius: 6px;
+  font: inherit; font-size: 13px; cursor: pointer;
+}
+.draftCancel:hover { color: var(--dash-text); }
+.draftFullEditor { flex: 1; min-height: 0; display: flex; }
+.draftFullEditor .rte { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.draftFullEditor .rteSurface { flex: 1; max-height: none; }
+
+/* Loading spinner — shown while the resolution queue (and other async
+   dashboard views) fetch. Ring in the border colour with one arc in the
+   muted text colour. */
+.spinner {
+  width: 26px;
+  height: 26px;
+  border: 3px solid var(--dash-border);
+  border-top-color: var(--dash-text-muted);
+  border-radius: 50%;
+  animation: dash-spin 0.8s linear infinite;
+}
+
+@keyframes dash-spin {
+  to { transform: rotate(360deg); }
+}
+
+.loadingRow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 0;
+  color: var(--dash-text-muted);
+  font-size: 14px;
+  text-align: center;
+}
+
+/* Centered, boxed empty state (e.g. "Queue clear"). */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+  padding: 56px 24px;
+  margin-top: 8px;
+  border: 1px solid var(--dash-border);
+  border-radius: 12px;
+  color: var(--dash-text-muted);
+  font-size: 14px;
+}
+
+.emptyStateIcon { color: var(--dash-text-muted); opacity: 0.6; }
+