@mcp-b/react-components 0.44.0 → 0.45.0

package/dist/styles/manager-office.css

@@ -3,13 +3,1018 @@
   min-block-size: 32rem;
 }
 
+.manager-office--dashboard {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+  background: var(--sigvelo-color-surface);
+}
+
+.manager-office--dashboard .app-top-bar__title {
+  font-size: var(--sigvelo-text-base);
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+.manager-office__dashboard {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.manager-office__dashboard-content {
+  max-inline-size: none;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-layout-gap);
+}
+
+.manager-office__dashboard-grid {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: var(--sigvelo-spacing-3);
+  list-style: none;
+}
+
+.manager-office__dashboard-employee {
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 8rem;
+  padding: var(--sigvelo-spacing-4);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  justify-content: stretch;
+  gap: var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-lg);
+  background: var(--sigvelo-color-surface);
+  text-align: start;
+  white-space: normal;
+}
+
+.manager-office__dashboard-employee:hover {
+  border-color: var(--sigvelo-color-neutral-border);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.manager-office__dashboard-copy {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.manager-office__dashboard-copy > strong {
+  font-size: var(--sigvelo-text-base);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+.manager-office__dashboard-copy > small {
+  min-block-size: calc(2 * var(--sigvelo-text-xs-leading));
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+
+.manager-office__dashboard-status {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+
+.manager-office__dashboard-status > svg,
+.manager-office__dashboard-chevron {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__dashboard-status:is([data-status="needs-you"], [data-status="issue"]) {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__dashboard-status:is([data-status="working"], [data-status="connecting"]) {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.manager-office__dashboard-work-count {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__dashboard-chevron {
+  align-self: center;
+  color: var(--sigvelo-color-text-subtle);
+}
+
+/* Work-first office dashboard. The old employee-card selectors above remain
+   for host compatibility; the progress board below owns the current overview. */
+.manager-office__dashboard {
+  container: manager-office-dashboard / inline-size;
+}
+
+.manager-office__dashboard-content {
+  gap: var(--sigvelo-spacing-5);
+}
+
+.manager-office__dashboard-controls {
+  min-inline-size: 0;
+  padding-block-end: var(--sigvelo-spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3);
+  overflow-x: auto;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  scrollbar-width: none;
+}
+
+.manager-office__dashboard-controls::-webkit-scrollbar {
+  display: none;
+}
+
+.manager-office__workforce-actions {
+  flex: none;
+  min-block-size: var(--sigvelo-control-height-md);
+  padding-inline-end: var(--sigvelo-spacing-3);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.manager-office__kanban-lane h3,
+.manager-office__kanban-lane p {
+  margin: 0;
+}
+
+.manager-office__kanban-lane-header small,
+.manager-office__kanban-empty,
+.manager-office__dashboard-card-owner > small,
+.manager-office__dashboard-card-copy > small,
+.manager-office__dashboard-updated,
+.manager-office__connection-empty {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+}
+
+.manager-office__filters {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  border: 0;
+  background: transparent;
+}
+
+.manager-office__add-employee {
+  min-inline-size: var(--sigvelo-control-height-md);
+  min-block-size: var(--sigvelo-control-height-md);
+  padding: var(--sigvelo-spacing-1);
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+}
+
+.manager-office__add-employee:hover:not([data-disabled]) {
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.manager-office__add-employee > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__filters-main {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__filters-heading {
+  flex: none;
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  white-space: nowrap;
+}
+
+.manager-office__filters-heading > strong {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.manager-office__filter-categories {
+  min-inline-size: 0;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.manager-office__filter-categories::-webkit-scrollbar {
+  display: none;
+}
+
+.manager-office__filter-trigger {
+  min-block-size: var(--sigvelo-control-height-md);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  border-color: var(--sigvelo-color-neutral-border-muted);
+  background: var(--sigvelo-color-surface);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.manager-office__filter-trigger[data-active] {
+  border-color: var(--sigvelo-color-primary-border-muted);
+  background: var(--sigvelo-color-primary-bg-subtle);
+}
+
+.manager-office__filter-trigger > strong {
+  color: var(--sigvelo-color-primary-text);
+  font-size: var(--sigvelo-text-2xs);
+}
+
+.manager-office__filter-trigger > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__filter-clear {
+  flex: none;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__filter-clear > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__filter-popup {
+  max-block-size: 22rem;
+  overflow-y: auto;
+}
+
+.manager-office__filters > p {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  white-space: nowrap;
+}
+
+.manager-office__filters > p strong {
+  color: var(--sigvelo-color-text);
+}
+
+.manager-office__analytics {
+  min-inline-size: 0;
+  padding: var(--sigvelo-spacing-4);
+  display: grid;
+  gap: var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-lg);
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 38%);
+}
+
+.manager-office__analytics-header {
+  min-inline-size: 0;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.manager-office__analytics-header h2 {
+  margin: 0;
+}
+
+.manager-office__analytics-header h2 {
+  font-size: var(--sigvelo-text-base);
+  line-height: var(--sigvelo-text-base-leading);
+}
+
+.manager-office__analytics-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__analytics-range {
+  min-inline-size: 9.25rem;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  border-color: transparent;
+  background: var(--sigvelo-color-neutral-bg-subtle);
+  white-space: nowrap;
+}
+
+.manager-office__analytics-range > svg:first-child {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__analytics-range > svg:last-child {
+  margin-inline-start: auto;
+}
+
+.manager-office__analytics-series-grid {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__analytics-series {
+  min-inline-size: 0;
+  padding: var(--sigvelo-spacing-3);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: var(--sigvelo-spacing-2);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-viz-series-1);
+}
+
+.manager-office__analytics-series[data-tone="outcomes"] {
+  color: var(--sigvelo-color-viz-series-2);
+}
+
+.manager-office__analytics-series[data-tone="roi"] {
+  color: var(--sigvelo-color-viz-series-4);
+}
+
+.manager-office__analytics-series-copy {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__analytics-series-copy small,
+.manager-office__analytics-series-copy > span {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+}
+
+.manager-office__analytics-series-copy small,
+.manager-office__analytics-series-copy strong {
+  grid-column: 1;
+}
+
+.manager-office__analytics-series-copy > span:not(.manager-office__analytics-average) {
+  grid-column: 1 / -1;
+}
+
+.manager-office__analytics-series-copy strong {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-xl);
+  line-height: var(--sigvelo-text-xl-leading);
+}
+
+.manager-office__analytics-chart {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: 2.5rem minmax(0, 1fr);
+  grid-template-rows: 6rem auto;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.manager-office__analytics-chart > svg {
+  grid-column: 2;
+  grid-row: 1;
+  inline-size: 100%;
+  block-size: 6rem;
+  overflow: visible;
+}
+
+.manager-office__analytics-y-axis {
+  grid-column: 1;
+  grid-row: 1;
+  min-inline-size: 0;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  flex-direction: column;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  font-variant-numeric: tabular-nums;
+}
+
+.manager-office__analytics-x-axis {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  font-variant-numeric: tabular-nums;
+}
+
+.manager-office__analytics-gridline,
+.manager-office__analytics-axis-line,
+.manager-office__analytics-line,
+.manager-office__analytics-area {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.manager-office__analytics-area {
+  fill: currentColor;
+  opacity: 0.12;
+}
+
+.manager-office__analytics-gridline {
+  stroke: var(--sigvelo-color-neutral-border-subtle);
+  stroke-width: var(--sigvelo-border-width);
+}
+
+.manager-office__analytics-axis-line {
+  stroke: var(--sigvelo-color-neutral-border-muted);
+  stroke-width: var(--sigvelo-border-width);
+}
+
+.manager-office__analytics-line {
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.manager-office__analytics-bar {
+  fill: currentColor;
+  opacity: 0.86;
+}
+
+.manager-office__analytics-endpoint {
+  fill: var(--sigvelo-color-surface);
+  stroke: currentColor;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.manager-office__assignment-trigger {
+  min-block-size: var(--sigvelo-control-height-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  border-color: var(--sigvelo-color-primary-bg);
+  background: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
+  font-size: var(--sigvelo-text-xs);
+  white-space: nowrap;
+}
+
+.manager-office__assignment-trigger > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__assignment-trigger > svg:last-child {
+}
+
+.manager-office__assignment-trigger:hover:not([data-disabled]) {
+  background: var(--sigvelo-color-primary-bg-hover);
+}
+
+.manager-office__assignment-trigger:active:not([data-disabled]) {
+  background: var(--sigvelo-color-primary-bg-press);
+}
+
+.manager-office__assignment-popup {
+  inline-size: min(22rem, calc(100vw - 2 * var(--sigvelo-spacing-4)));
+  max-block-size: 24rem;
+  overflow-y: auto;
+}
+
+.manager-office__assignment-item {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__assignment-item > span {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__assignment-item strong,
+.manager-office__assignment-item small {
+  min-inline-size: 0;
+}
+
+.manager-office__assignment-item small {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__assignment-item > svg:last-child {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+  color: var(--sigvelo-color-text-subtle);
+}
+
+.manager-office__kanban-more {
+  margin: 0;
+  padding: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  text-align: center;
+}
+
+.manager-office__kanban {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(15rem, 1fr));
+  align-items: start;
+  gap: var(--sigvelo-spacing-3);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  padding-block-end: var(--sigvelo-spacing-1);
+}
+
+.manager-office__kanban-lane {
+  min-inline-size: 0;
+  padding: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text);
+}
+
+.manager-office__kanban-lane:not(:first-child):not([data-collapsed]) {
+  padding-inline-start: var(--sigvelo-spacing-3);
+  border-inline-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.manager-office__kanban-lane[data-collapsed] {
+  gap: 0;
+}
+
+.manager-office__kanban-lane-header {
+  min-block-size: 3.5rem;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.manager-office__kanban-lane-header > span {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__kanban-lane-header > .manager-office__kanban-lane-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.manager-office__kanban-lane-toggle,
+.manager-office__dashboard-card-toggle {
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  padding: 0;
+}
+
+.manager-office__kanban-lane-toggle > svg,
+.manager-office__dashboard-card-toggle > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__kanban-lane[data-collapsed] .manager-office__kanban-lane-header {
+  min-block-size: 18rem;
+  padding: var(--sigvelo-spacing-1);
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.manager-office__kanban-lane[data-collapsed]
+  .manager-office__kanban-lane-header
+  > span:first-child {
+  align-items: center;
+  order: 2;
+}
+
+.manager-office__kanban-lane[data-collapsed] .manager-office__kanban-lane-header h3 {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+}
+
+.manager-office__kanban-lane[data-collapsed] .manager-office__kanban-lane-header small {
+  display: none;
+}
+
+.manager-office__kanban-lane[data-collapsed]
+  .manager-office__kanban-lane-header
+  > .manager-office__kanban-lane-actions {
+  order: 1;
+  flex-direction: column-reverse;
+}
+.manager-office__kanban-lane-header h3 {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+.manager-office__kanban-lane-actions > strong {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+}
+.manager-office__kanban-cards {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+}
+.manager-office__kanban-empty {
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-2);
+  text-align: center;
+}
+
+.manager-office__dashboard-card {
+  min-inline-size: 0;
+  overflow: hidden;
+  display: grid;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+  box-shadow: var(--sigvelo-elevation-raised);
+}
+
+.manager-office__dashboard-card-header {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__dashboard-card[data-collapsed] {
+  gap: 0;
+  box-shadow: none;
+}
+
+.manager-office__dashboard-card-owner,
+.manager-office__dashboard-card-copy {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+.manager-office__dashboard-card-owner > strong,
+.manager-office__dashboard-card-copy > strong {
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+.manager-office__dashboard-card-copy > small {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.manager-office__outcome-summary {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.manager-office__outcome-summary > strong {
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+
+.manager-office__outcome-summary > p {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+.manager-office__outcome-summary .manager-office__dashboard-updated {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__browser-preview {
+  position: relative;
+  min-inline-size: 0;
+  aspect-ratio: 16 / 8.5;
+  overflow: hidden;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.manager-office__browser-chrome {
+  block-size: 1.45rem;
+  padding-inline: var(--sigvelo-spacing-2);
+  display: grid;
+  grid-template-columns: repeat(3, 0.35rem) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface-raised);
+}
+
+.manager-office__browser-chrome > span {
+  inline-size: 0.35rem;
+  block-size: 0.35rem;
+  border-radius: 50%;
+  background: var(--sigvelo-color-neutral-border);
+}
+.manager-office__browser-chrome > span:first-child {
+  background: var(--sigvelo-color-danger-border);
+}
+.manager-office__browser-chrome > small {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-subtle);
+  font-size: 0.55em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.manager-office__browser-page {
+  position: absolute;
+  inset: 1.45rem 0 0;
+  padding: var(--sigvelo-spacing-3);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+  align-content: start;
+  gap: var(--sigvelo-spacing-2);
+  background:
+    radial-gradient(circle at 90% 10%, var(--sigvelo-color-primary-bg-subtle), transparent 40%),
+    var(--sigvelo-color-surface);
+}
+
+.manager-office__browser-page-mark {
+  inline-size: 1.35rem;
+  block-size: 1.35rem;
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-primary-bg);
+}
+.manager-office__browser-page-copy {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: 2px;
+}
+.manager-office__browser-page-copy strong,
+.manager-office__browser-page-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.manager-office__browser-page-copy strong {
+  font-size: 0.68em;
+  line-height: var(--sigvelo-leading-tight);
+}
+.manager-office__browser-page-copy small {
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.52em;
+  line-height: var(--sigvelo-leading-tight);
+}
+.manager-office__browser-page-lines {
+  grid-column: 1 / -1;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-1);
+}
+.manager-office__browser-page-lines > i {
+  block-size: 0.33rem;
+  border-radius: var(--sigvelo-radius-xs);
+  background: var(--sigvelo-color-neutral-bg);
+}
+.manager-office__browser-page-lines > i:nth-child(2) {
+  inline-size: 78%;
+}
+.manager-office__browser-page-lines > i:nth-child(3) {
+  inline-size: 54%;
+  background: var(--sigvelo-color-primary-bg-subtle);
+}
+.manager-office__browser-cursor {
+  position: absolute;
+  inset-inline-end: 22%;
+  inset-block-end: 22%;
+  inline-size: 0.55rem;
+  block-size: 0.75rem;
+  background: var(--sigvelo-color-text);
+  clip-path: polygon(0 0, 100% 70%, 58% 72%, 42% 100%);
+  animation: manager-office-browser-cursor 2.8s ease-in-out infinite;
+}
+@keyframes manager-office-browser-cursor {
+  0%,
+  100% {
+    transform: translate(0);
+  }
+  48% {
+    transform: translate(-1.4rem, -0.55rem);
+  }
+}
+.manager-office__browser-state {
+  position: absolute;
+  inset-inline-end: var(--sigvelo-spacing-2);
+  inset-block-end: var(--sigvelo-spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.58em;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+.manager-office__browser-state > svg {
+  inline-size: 0.65rem;
+  block-size: 0.65rem;
+}
+.manager-office__browser-preview[data-lane="working"] .manager-office__browser-state {
+  color: var(--sigvelo-color-primary-text);
+}
+.manager-office__browser-preview[data-lane="needs-you"] .manager-office__browser-state {
+  color: var(--sigvelo-color-danger-text);
+}
+.manager-office__browser-preview[data-lane="done"] .manager-office__browser-state {
+  color: var(--sigvelo-color-success-text);
+}
+
+.manager-office__dashboard-connections {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+}
+.manager-office__connection-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+}
+.manager-office__connection-icons .app-icon {
+  filter: none;
+}
+.manager-office__dashboard-card-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  padding-block-start: var(--sigvelo-spacing-2);
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+.manager-office__dashboard-card-actions > * {
+  flex: 1;
+}
+
+@container manager-office-dashboard (inline-size <= 70rem) {
+  .manager-office__analytics-series {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container manager-office-dashboard (inline-size <= 38rem) {
+  .manager-office__dashboard-content {
+    gap: var(--sigvelo-spacing-3);
+  }
+  .manager-office__workforce-actions {
+    display: flex;
+    gap: var(--sigvelo-spacing-2);
+    padding-inline-end: var(--sigvelo-spacing-2);
+  }
+  .manager-office__dashboard-controls {
+    gap: var(--sigvelo-spacing-2);
+    padding-block-end: var(--sigvelo-spacing-2);
+  }
+  .manager-office__workforce-actions > * {
+    inline-size: auto;
+  }
+  .manager-office__filters {
+    flex: none;
+    display: flex;
+  }
+  .manager-office__filters-main {
+    flex: none;
+  }
+  .manager-office__analytics {
+    padding: var(--sigvelo-spacing-3);
+  }
+  .manager-office__analytics-header {
+    align-items: stretch;
+    flex-direction: column;
+    gap: var(--sigvelo-spacing-2);
+  }
+  .manager-office__analytics-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--sigvelo-spacing-1);
+  }
+  .manager-office__analytics-actions > * {
+    inline-size: 100%;
+    justify-content: center;
+  }
+  .manager-office__analytics-range {
+    min-inline-size: 0;
+    padding-inline: var(--sigvelo-spacing-2);
+  }
+  .manager-office__analytics-range > svg:first-child,
+  .manager-office__export-report-suffix {
+    display: none;
+  }
+  .manager-office__analytics-export {
+    min-inline-size: 0;
+  }
+  .manager-office__analytics-series-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .manager-office__analytics-series {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (width <= 38rem) {
+  .manager-office__assignment-trigger {
+    inline-size: auto;
+    min-block-size: var(--sigvelo-density-compact-control-height);
+    padding-inline: var(--sigvelo-spacing-2);
+    gap: var(--sigvelo-spacing-1);
+    font-size: var(--sigvelo-text-xs);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .manager-office__browser-cursor {
+    animation: none;
+  }
+}
+
+.manager-office--dashboard > .empty-state,
+.manager-office__dashboard > .empty-state {
+  min-block-size: 100%;
+}
+
 .manager-office__sidebar {
   block-size: 100%;
   min-inline-size: 0;
-  display: grid;
-  grid-template-rows: auto auto auto var(--sigvelo-layout-track-fill);
-  gap: var(--sigvelo-density-compact-control-gap);
-  padding: var(--sigvelo-layout-cluster);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
 }
 
 .manager-office__sidebar-heading,
@@ -22,7 +1027,7 @@
 .manager-office__sidebar-heading {
   min-block-size: var(--sigvelo-density-compact-control-height);
   justify-content: space-between;
-  padding-inline-start: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) 0;
 }
 
 .manager-office__sidebar-actions {
@@ -53,33 +1058,13 @@
   line-height: var(--sigvelo-text-sm-leading);
 }
 
-.manager-office__attention-nav,
-.manager-office__employee-link {
-  inline-size: 100%;
-  min-inline-size: 0;
-  display: grid;
-  align-items: center;
-  justify-content: stretch;
-  gap: var(--sigvelo-density-compact-control-gap);
-  font-weight: var(--sigvelo-font-weight-normal);
-  text-align: start;
-}
-
-.manager-office__attention-nav {
-  grid-template-columns: auto var(--sigvelo-layout-track-fill);
-}
-
-.manager-office__attention-nav > svg {
-  color: var(--sigvelo-color-danger-text);
-}
-
 /* A section label above the roster, sized to the rail's own quiet voice. */
 .manager-office__nav-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-spacing-2);
-  margin: var(--sigvelo-spacing-1) 0 0;
+  margin: var(--sigvelo-spacing-2) 0 var(--sigvelo-spacing-1);
   padding-inline: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-2xs);
@@ -90,13 +1075,269 @@
 }
 
 .manager-office__employee-nav {
+  --manager-office-roster-scrollbar-size: 4px;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sigvelo-spacing-0-5);
+  overflow-x: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  list-style: none;
+}
+
+.manager-office__employee-nav[data-overflowing="true"] {
+  padding-block: calc(var(--sigvelo-spacing-1) + var(--manager-office-roster-scrollbar-size));
+}
+
+.manager-office__employee-nav:hover,
+.manager-office__employee-nav:focus-within {
+  scrollbar-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 52%) transparent;
+}
+
+.manager-office__employee-nav::-webkit-scrollbar {
+  block-size: var(--manager-office-roster-scrollbar-size);
+}
+
+.manager-office__employee-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.manager-office__employee-nav::-webkit-scrollbar-thumb {
+  border-radius: var(--sigvelo-radius-full);
+  background: transparent;
+}
+
+.manager-office__employee-nav:hover::-webkit-scrollbar-thumb,
+.manager-office__employee-nav:focus-within::-webkit-scrollbar-thumb {
+  background: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 52%);
+}
+
+.manager-office__employee-nav::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+}
+
+.manager-office__employee-group {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+.manager-office__sidebar-content {
+  min-inline-size: 0;
   min-block-size: 0;
-  overflow: auto;
+  flex: 1;
+  overflow: hidden;
+}
+
+.manager-office__sidebar-footer {
+  padding: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-1)
+    calc(var(--sigvelo-spacing-0-5) + env(safe-area-inset-bottom, 0px));
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.manager-office__sidebar-alert {
+  inline-size: 100%;
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+  text-align: start;
+  white-space: normal;
+}
+
+.manager-office__sidebar-alert:hover:not([data-disabled]) {
+  border-color: var(--sigvelo-color-danger-border);
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 25%);
+}
+
+.manager-office__sidebar-alert:focus-visible {
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+}
+
+.manager-office__sidebar-alert-copy {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__sidebar-alert-copy strong,
+.manager-office__sidebar-alert-copy small {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.manager-office__sidebar-alert-copy strong {
+  display: -webkit-box;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-xs-leading);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.manager-office__sidebar-alert-copy small {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+  white-space: nowrap;
+}
+
+.manager-office__sidebar-alert-meta {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.manager-office__sidebar-alert-meta small {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.manager-office__sidebar-alert-status {
+  flex: none;
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xs-leading);
+}
+
+.manager-office__sidebar-alert-chevron {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .manager-office__employee-link {
-  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
-  padding-block: var(--sigvelo-spacing-1);
+  position: relative;
+  inline-size: 2.875rem;
+  block-size: 2.875rem;
+  min-inline-size: 2.875rem;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.manager-office__employee-link[aria-current="page"] {
+  background: transparent;
+}
+
+.manager-office__employee-avatar {
+  position: relative;
+  display: inline-flex;
+  border-radius: var(--sigvelo-radius-md);
+  transition: transform var(--sigvelo-duration-fast) ease;
+}
+
+.manager-office__employee-link[aria-current="page"] .manager-office__employee-avatar {
+  transform: translateY(-1px) rotate(-2deg);
+}
+
+.manager-office__employee-link[aria-current="page"]::after {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-end: -1px;
+  inline-size: 1.125rem;
+  block-size: 2px;
+  border-radius: var(--sigvelo-radius-full);
+  background: var(--sigvelo-color-text);
+  content: "";
+  opacity: 0.72;
+  transform: translateX(-50%);
+}
+
+.manager-office__employee-link:hover .manager-office__employee-avatar {
+  transform: translateY(-1px) rotate(-2deg);
+}
+
+.manager-office__employee-character[data-size="sm"] {
+  --sigvelo-recipe-avatar-size: 2.625rem;
+}
+
+.manager-office__employee-character {
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+}
+
+.manager-office__employee-character-fallback {
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: visible;
+  border-radius: 0;
+}
+
+.manager-office__employee-character-fallback > svg {
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: visible;
+}
+
+.manager-office__employee-character-face {
+  opacity: 0.92;
+}
+
+.manager-office__employee-character-lens {
+  stroke: color-mix(in oklab, var(--sigvelo-color-text), transparent 12%);
+  stroke-width: 1.15;
+  paint-order: stroke fill;
+}
+
+.manager-office__employee-character-visor {
+  stroke: color-mix(in oklab, var(--sigvelo-color-text), transparent 36%);
+  stroke-width: 0.85;
+  paint-order: stroke fill;
+}
+
+.manager-office__employee-character-bridge {
+  fill: none;
+  stroke: color-mix(in oklab, var(--sigvelo-color-text), transparent 12%);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+.manager-office__employee-character-shine {
+  opacity: 0.22;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .manager-office__employee-avatar {
+    transition: none;
+  }
+
+  .manager-office__employee-link:hover .manager-office__employee-avatar {
+    transform: none;
+  }
+
+  .manager-office__employee-link[aria-current="page"] .manager-office__employee-avatar {
+    transform: translateY(-1px);
+  }
+}
+
+.manager-office__nav-status {
+  position: absolute;
+  inset-inline-end: -1px;
+  inset-block-end: -1px;
+  inline-size: 15px;
+  block-size: 15px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sigvelo-radius-xs);
+  background: var(--sigvelo-color-surface);
+  box-shadow: 0 0 0 1.5px var(--sigvelo-color-surface);
 }
 
 .manager-office__identity {
@@ -122,11 +1363,6 @@
   line-height: var(--sigvelo-text-xs-leading);
 }
 
-.manager-office__attention-nav[aria-current="page"],
-.manager-office__employee-link[aria-current="page"] {
-  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
-}
-
 .manager-office__main {
   min-inline-size: 0;
   min-block-size: 0;
@@ -377,20 +1613,10 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.manager-office__status,
-.manager-office__evidence {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sigvelo-density-compact-control-gap);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-snug);
-  white-space: nowrap;
+.manager-office__nav-status {
+  cursor: help;
 }
 
-.manager-office__status > svg,
-.manager-office__evidence > svg,
-.manager-office__nav-status > svg,
 .manager-office__thread-status > svg,
 .manager-office__channel-direction > svg,
 .manager-office__channel-status > svg,
@@ -400,35 +1626,40 @@
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
-.manager-office__status[data-status="needs-you"],
-.manager-office__nav-status[data-status="needs-you"],
-.manager-office__status[data-status="issue"],
-.manager-office__status[data-status="unavailable"],
-.manager-office__nav-status[data-status="issue"],
-.manager-office__nav-status[data-status="unavailable"],
+.manager-office__nav-status > svg {
+  inline-size: 11px;
+  block-size: 11px;
+  stroke-width: 2.35;
+}
+
+.manager-office__nav-status:is([data-status="needs-you"], [data-status="issue"]) {
+  color: light-dark(#b3261e, #ff8a80);
+}
+
+.manager-office__nav-status[data-status="unavailable"] {
+  color: light-dark(#7c2d12, #fb923c);
+}
+
+.manager-office__nav-status[data-status="idle"] {
+  color: light-dark(#087f5b, #4fd1a1);
+}
+
+.manager-office__nav-status[data-status="offline"] {
+  color: light-dark(#667085, #a7afbe);
+}
+
 .manager-office__thread-status[data-status="error"] {
   color: var(--sigvelo-color-danger-text);
 }
 
-.manager-office__status[data-status="working"],
-.manager-office__status[data-status="connecting"],
-.manager-office__nav-status[data-status="working"],
-.manager-office__nav-status[data-status="connecting"],
-.manager-office__thread-status[data-status="running"] {
-  color: var(--sigvelo-color-primary-text);
+.manager-office__nav-status:is([data-status="working"], [data-status="connecting"]) {
+  color: light-dark(#0b57d0, #69a7ff);
 }
 
-.manager-office__evidence[data-complete] {
-  color: var(--sigvelo-color-success-text);
+.manager-office__thread-status[data-status="running"] {
+  color: var(--sigvelo-color-primary-text);
 }
 
-/*
- * The rail's state line stays muted and lets the glyph beside it carry the
- * colour. Tinting both put semantic text at 11px over the selected row's
- * raised background, which lands at 4.28:1 — under the 4.5:1 floor — and the
- * glyph is a non-text element held to 3:1, so it can say the same thing.
- */
-
 .manager-office__unread-dot {
   display: inline-block;
   inline-size: var(--sigvelo-spacing-1-5);
@@ -463,7 +1694,6 @@
 }
 
 @media (any-pointer: coarse) {
-  .manager-office__attention-nav,
   .manager-office__employee-link,
   .manager-office__work-link,
   .manager-office__routine-link,
@@ -473,8 +1703,11 @@
 }
 
 @media (forced-colors: active) {
-  .manager-office__attention-nav[aria-current="page"],
   .manager-office__employee-link[aria-current="page"] {
-    outline: var(--sigvelo-border-width) solid Highlight;
+    outline: none;
+  }
+
+  .manager-office__employee-link[aria-current="page"]::after {
+    background: Highlight;
   }
 }