:root {
  --wd-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-fg: var(--sx-colorNeutralForeground1, #111827);
  --wd-muted: var(--sx-colorNeutralForeground2, #6b7280);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #6b7280);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #f5f5f5);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #d1d5db) 80%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #111827) 6%, transparent);
  --wd-primary: var(--sx-colorBrandBackground1, #3b82f6);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #b91c1c);
  --wd-success: var(--sx-colorStatusSuccessForeground1, var(--sx-colorStatusSuccess, #15803d));
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #111827) 3%, transparent);
  /* Keyboard focus deliberately does NOT use --wd-primary. The brand colour marks "this card is
     selected", which is the state a bulk action will act on; focus only answers "where will my
     next keystroke land". Giving both the same colour left two cards on screen looking equally
     current. Resolving to the neutral foreground keeps focus high-contrast in every theme while
     leaving the brand colour to mean one thing. See spec §7.3. */
  --wd-focus-outline: var(--wd-fg);
  --wd-kanban-card-stack-gap: var(--sx-spacing-xs);
  --wd-kanban-menu-heading-letter-spacing: 0.05em;
}

html[data-theme="dark"] {
  --wd-bg: var(--sx-colorNeutralBackground1, #0b1220);
  --wd-fg: var(--sx-colorNeutralForeground1, #e5e7eb);
  --wd-muted: var(--sx-colorNeutralForeground2, #9ca3af);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #9ca3af);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #0f172a);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #111827);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #475569) 55%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #e5e7eb) 8%, transparent);
  --wd-primary: var(--sx-colorBrandBackground1, #3b82f6);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #f87171);
  --wd-success: var(--sx-colorStatusSuccessForeground1, var(--sx-colorStatusSuccess, #4ade80));
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #e5e7eb) 4%, transparent);
}

html[data-theme="emerald"] {
  --wd-bg: var(--sx-colorNeutralBackground1, #f0fdf4);
  --wd-fg: var(--sx-colorNeutralForeground1, #064e3b);
  --wd-muted: var(--sx-colorNeutralForeground2, #047857);
  --wd-muted-fg: var(--sx-colorNeutralForeground2, #047857);
  --wd-card-bg: var(--sx-colorNeutralBackground1, #ffffff);
  --wd-page-bg: var(--sx-colorNeutralBackground3, #ecfdf5);
  --wd-border: color-mix(in srgb, var(--sx-colorNeutralStroke1, #86efac) 55%, transparent);
  --wd-hover-bg: color-mix(in srgb, var(--sx-colorNeutralForeground1, #064e3b) 8%, transparent);
  --wd-primary: var(--sx-colorBrandBackground1, #10b981);
  --wd-primary-fg: var(--sx-colorOnBrand, #ffffff);
  --wd-danger: var(--sx-colorStatusDangerForeground1, #b91c1c);
  --wd-success: var(--sx-colorStatusSuccessForeground1, var(--sx-colorStatusSuccess, #047857));
  --wd-surface-subtle: color-mix(in srgb, var(--sx-colorNeutralForeground1, #064e3b) 3%, transparent);
}

/*
 * Full-height Workdesk surface contract
 *
 * Hosts own the navigation inset. A full-height Workdesk page starts at the
 * shell content edge, clips its outer surface, and delegates vertical scrolling
 * to its named content panes. Keep every flex ancestor shrinkable so a long
 * child never expands the route beneath the shell header.
 */
.wd-full-height-surface {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.wd-workdesk-admin-surface,
.wd-workspace-page-surface,
.wd-task-route-page,
.wd-task-edit-root,
.wd-task-edit-panel {
  flex-direction: column;
}

.wd-workdesk-admin-surface > *,
.wd-workspace-page-surface > .wd-workspace-content-host {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Root and Overview pages are document-like surfaces inside the full-height route. */
.wd-desk-route-scroll-owner,
.wd-workspace-overview-scroll-owner {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.wd-desk-route-scroll-owner:focus-visible,
.wd-workspace-overview-scroll-owner:focus-visible {
  outline: 2px solid var(--wd-primary);
  outline-offset: -2px;
}

/* Workspace routes are multi-pane surfaces, not document scrollers. */
.wd-full-height-surface-viewport {
  flex: 1 1 0 !important;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  overflow: hidden;
}

.sx-shell-viewport.wd-full-height-surface-viewport > .sx-shell-viewport__scroller,
.sx-shell-viewport.wd-full-height-surface-viewport > .sx-shell-viewport__scroller > .sx-shell-viewport__content {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0 !important;
  max-width: none;
  margin: 0;
  padding-block: 0;
  overflow: hidden;
}

/* Global-page and task-preview routes must not become a second scroll owner. */
.sx-shell-route.sx-shell-route:has(.wd-task-route-page),
.sx-shell-surface-route.sx-shell-surface-route:has(.wd-task-route-page) {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.wd-task-route-page,
.wd-task-edit-root,
.wd-task-edit-panel,
.wd-task-edit-container,
.wd-task-content-layout,
.wd-task-layout-splitter,
.wd-task-layout-splitter > .sx-splitter-panel,
.wd-task-main-pane,
.wd-task-main-scroll,
.wd-task-detail-shell,
.wd-task-detail-grid,
.wd-task-detail-grid > .sx-splitter-panel {
  min-width: 0;
  min-height: 0;
}

.wd-task-route-page,
.wd-task-edit-root,
.wd-task-edit-panel,
.wd-task-main-pane,
.wd-task-main-scroll,
.wd-task-detail-shell {
  display: flex;
  flex-direction: column;
}

.wd-task-edit-panel,
.wd-task-edit-container,
.wd-task-content-layout,
.wd-task-layout-splitter,
.wd-task-main-pane,
.wd-task-main-scroll,
.wd-task-detail-shell,
.wd-task-detail-grid {
  flex: 1 1 0;
}

.wd-task-edit-container,
.wd-task-content-layout,
.wd-task-layout-splitter {
  display: flex;
  overflow: hidden;
}

@media (max-width: 47.99rem) {
  /*
   * The outer splitter's desktop minimums are emitted inline so dragging stays
   * bounded. On compact routes the activity pane is not rendered, therefore
   * the task pane must own the full width instead of being centered at 32rem.
   */
  .wd-task-layout-splitter > .sx-splitter-panel-1 {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wd-task-layout-splitter > .sx-splitter-bar,
  .wd-task-layout-splitter > .sx-splitter-panel-2 {
    display: none !important;
  }
}

.wd-task-route-page,
.wd-task-edit-root,
.wd-task-edit-panel,
.wd-task-edit-container,
.wd-task-content-layout,
.wd-task-layout-splitter,
.wd-task-layout-splitter > .sx-splitter-panel,
.wd-task-main-pane,
.wd-task-main-scroll,
.wd-task-detail-shell,
.wd-task-detail-grid,
.wd-task-detail-grid > .sx-splitter-panel {
  overflow: hidden;
}

.wd-task-detail-column,
.wd-task-sidebar-panel {
  min-height: 0;
  overscroll-behavior: contain;
}

.wd-task-route-page .sx-card.wd-task-sidebar-card {
  align-self: stretch;
  height: auto;
  max-height: none;
}

/*
 * The activity sidebar owns a nested vertical splitter. Its top pane is the
 * activity scroll owner; its bottom pane is the composer. Every intermediate
 * node stays shrinkable so the composer remains at the available bottom.
 */
.wd-activity-panel,
.wd-activity-vertical-splitter,
.wd-activity-vertical-splitter > .sx-splitter-panel,
.wd-activity-content-pane,
.wd-activity-stream-wrap,
.wd-activity-composer-pane,
.wd-activity-input-area,
.wd-activity-input-shell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.wd-activity-panel,
.wd-activity-content-pane,
.wd-activity-composer-pane,
.wd-activity-input-area,
.wd-activity-input-shell {
  display: flex;
  flex-direction: column;
}

.wd-activity-vertical-splitter,
.wd-activity-content-pane,
.wd-activity-composer-pane,
.wd-activity-input-area,
.wd-activity-input-shell {
  flex: 1 1 0;
}

.wd-activity-vertical-splitter,
.wd-activity-content-pane,
.wd-activity-composer-pane {
  width: 100%;
  height: 100%;
}

.wd-activity-reply-banner,
.wd-activity-input-toolbar {
  flex: 0 0 auto;
}

.wd-activity-stream,
.wd-activity-input {
  overscroll-behavior: contain;
}

.text-muted {
  color: var(--wd-muted) !important;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--wd-border) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 0.375rem;
}

.wd-task-description-save-status {
  display: flex;
  min-width: 0;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-spacing-xs, 0.5rem);
  padding: var(--sx-spacing-xxs, 0.25rem) var(--sx-spacing-xs, 0.5rem);
  border: 1px solid transparent;
  border-radius: var(--sx-radius-md, 0.5rem);
  color: var(--sx-colorNeutralForeground2);
  background: var(--sx-colorNeutralBackground2);
  font-size: var(--sx-font-size-xs, 0.75rem);
}

.wd-task-description-save-status__message,
.wd-task-description-save-status__actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--sx-spacing-xxs, 0.25rem);
}

.wd-task-description-save-status__message > span:last-child {
  overflow-wrap: anywhere;
}

.wd-task-description-save-status--pending,
.wd-task-description-save-status--saving {
  color: var(--sx-colorBrandForeground1);
  background: color-mix(in srgb, var(--sx-colorBrandBackground1) 8%, transparent);
}

.wd-task-description-save-status--saved {
  color: var(--sx-colorStatusSuccessForeground1);
  background: color-mix(in srgb, var(--sx-colorStatusSuccessBackground1) 45%, transparent);
}

.wd-task-description-save-status--failed {
  border-color: color-mix(in srgb, var(--sx-colorStatusDangerForeground1) 45%, transparent);
  color: var(--sx-colorStatusDangerForeground1);
  background: var(--sx-colorStatusDangerBackground1);
}

.wd-task-description-save-status--conflict {
  border-color: color-mix(in srgb, var(--sx-colorStatusWarningForeground1) 45%, transparent);
  color: var(--sx-colorStatusWarningForeground1);
  background: var(--sx-colorStatusWarningBackground1);
}

.wd-task-description-save-status--saving .sx-icon {
  animation: wd-description-save-spin var(--sx-duration-wave) linear infinite;
}

@keyframes wd-description-save-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-task-description-save-status--saving .sx-icon {
    animation: none;
  }
}

@media (max-width: 36rem) {
  .wd-task-description-save-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .wd-task-description-save-status__actions {
    align-self: stretch;
    flex-wrap: wrap;
  }
}

.wd-kanban-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wd-kanban-card-stack-gap);
}

.wd-kanban-card-stack > * {
  flex: 0 0 auto;
}

/*
 * Virtualize renders height-bearing sentinels before and after its items.
 * Keep those sentinels in the flex stack, but cancel only their adjacent gap so
 * the first and last cards retain the lane padding instead of gaining a second inset.
 */
.wd-kanban-card-stack > [aria-hidden="true"]:first-child:has(+ .wd-task-card) {
  margin-block-end: calc(-1 * var(--wd-kanban-card-stack-gap));
}

.wd-kanban-card-stack > .wd-task-card + [aria-hidden="true"]:last-child {
  margin-block-start: calc(-1 * var(--wd-kanban-card-stack-gap));
}

.wd-kanban-card-stack > [aria-hidden="true"]:first-child + [aria-hidden="true"]:last-child {
  margin-block-start: calc(-1 * var(--wd-kanban-card-stack-gap));
}

.wd-kanban-lane-header {
  min-inline-size: 0;
}

.wd-kanban-scrollport {
  --wd-kanban-collapsed-control-size: var(--sx-control-height-sm);
  --wd-kanban-collapsed-control-gap: var(--sx-spacing-xxs);
  --wd-kanban-collapsed-rail-padding-inline: var(--sx-spacing-xxs);
  /* EG_PD-545: the two rail controls stack top to bottom now, so the collapsed lane is one
     control wide instead of two. A collapsed lane exists to give its neighbours room; being
     half as wide is the point of it. */
  --wd-kanban-collapsed-column-width: calc(
    var(--wd-kanban-collapsed-control-size)
    + var(--wd-kanban-collapsed-rail-padding-inline)
    + var(--wd-kanban-collapsed-rail-padding-inline)
  );
}

.wd-kanban-lane--collapsed {
  inline-size: var(--wd-kanban-collapsed-column-width);
  min-inline-size: var(--wd-kanban-collapsed-column-width);
  max-inline-size: var(--wd-kanban-collapsed-column-width);
}

.wd-kanban-collapsed-rail {
  box-sizing: border-box;
  padding-inline: var(--wd-kanban-collapsed-rail-padding-inline);
  /* EG_PD-545: the standard step, not a hand-picked one. The rail's four items are one group, but
     grouped is not the same as crowded. */
  row-gap: var(--sx-spacing-s);
}

.wd-kanban-lane-header-actions,
.wd-kanban-lane-header-actions .sx-menu-wrapper,
.wd-kanban-lane-header-actions .sx-menu-trigger {
  flex: 0 0 auto;
}

.wd-kanban-lane--collapsed .wd-kanban-lane-header-actions {
  display: grid;
  inline-size: var(--wd-kanban-collapsed-control-size);
  grid-template-columns: var(--wd-kanban-collapsed-control-size);
  grid-auto-rows: var(--wd-kanban-collapsed-control-size);
  gap: var(--wd-kanban-collapsed-control-gap);
  align-items: center;
  justify-items: center;
}

/* The lane name reads down the rail. writing-mode rotates the glyphs the way a transform would
   while also turning the layout box on its side, which is what lets the surrounding flex gap do
   the spacing instead of hand-tuned margins. */
.wd-kanban-collapsed-title__text {
  writing-mode: vertical-rl;
  line-height: 1;
}

/* The count turns with the name. Padding follows the writing direction, so the same two properties
   read as "along the rail" and "across it" whichever way the text runs. */
.wd-kanban-collapsed-count__pill {
  writing-mode: vertical-rl;
  line-height: 1;
  padding-block: var(--sx-spacing-xs);
  padding-inline: var(--sx-spacing-xxs);
}

.wd-kanban-lane--collapsed .wd-kanban-lane-header-actions > *,
.wd-kanban-lane--collapsed .wd-kanban-lane-header-actions .sx-menu-wrapper,
.wd-kanban-lane--collapsed .wd-kanban-lane-header-actions .sx-menu-trigger {
  inline-size: var(--wd-kanban-collapsed-control-size);
  min-inline-size: var(--wd-kanban-collapsed-control-size);
  max-inline-size: var(--wd-kanban-collapsed-control-size);
}

.wd-kanban-lane-menu__heading {
  padding: var(--sx-spacing-xs) var(--sx-spacing-m);
  color: var(--wd-muted-fg);
  font-size: var(--sx-font-size-micro);
  font-weight: var(--sx-fontWeightSemibold);
  letter-spacing: var(--wd-kanban-menu-heading-letter-spacing);
  text-transform: uppercase;
}

.wd-kanban-lane-menu__separator {
  block-size: var(--sx-border-width-thin);
  margin-block: var(--sx-spacing-xs);
  background: var(--wd-border);
}

.wd-task-card--selected {
  background: color-mix(in srgb, var(--wd-primary) 7%, var(--wd-card-bg));
}

/* Dashed + neutral, so a card that merely has keyboard focus never reads as the current card. The
   solid brand ring on .wd-task-card--selected and this outline differ in both shape and hue, and
   this one sits inside so the two can be read at once without changing the card's box. */
.wd-task-card:focus-visible {
  outline: var(--sx-border-width-medium) dashed var(--wd-focus-outline);
  outline-offset: calc(-1 * var(--sx-border-width-medium));
}

.wd-kanban-bulk-dialog > .sx-dialog {
  max-inline-size: min(55rem, calc(100vw - 2rem));
  max-block-size: min(48rem, calc(100vh - 2rem));
}

.wd-kanban-bulk-dialog .sx-dialog-body--fill {
  min-block-size: 0;
  overflow: hidden;
}

.wd-kanban-bulk-dialog .sx-dialog-header,
.wd-kanban-bulk-dialog .sx-dialog-footer {
  flex: 0 0 auto;
}

.wd-kanban-bulk-editor {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 0;
  max-block-size: 100%;
  overflow: hidden;
  color: var(--wd-fg);
}

.wd-kanban-bulk-editor__scope-bar {
  display: flex;
  align-items: center;
  gap: var(--sx-spacing-s);
  min-inline-size: 0;
  max-inline-size: min(24rem, 45vw);
}

.wd-kanban-bulk-editor__scope {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wd-muted-fg);
}

.wd-kanban-bulk-editor__scroll {
  box-sizing: border-box;
  display: flex;
  min-block-size: 0;
  max-block-size: 100%;
  flex-direction: column;
  gap: var(--sx-spacing-l);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sx-spacing-l);
}

.wd-kanban-bulk-editor__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-spacing-xl) var(--sx-spacing-l);
}

.wd-kanban-bulk-editor__group {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--sx-spacing-m);
  padding-block-start: var(--sx-spacing-m);
  border-block-start: var(--sx-border-width-thin) solid var(--wd-border);
}

.wd-kanban-bulk-editor__group-title {
  margin: 0;
  color: var(--wd-fg);
  font-size: var(--sx-font-size-medium);
  font-weight: var(--sx-fontWeightSemibold);
}

.wd-kanban-bulk-editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-spacing-l);
}

.wd-kanban-bulk-editor__field {
  min-inline-size: 0;
}

.wd-kanban-bulk-editor__control-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-spacing-s);
  align-items: start;
  inline-size: 100%;
  --sx-input-adaptive-width: 100%;
}

.wd-kanban-bulk-editor__control-stack > * {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
}

.wd-kanban-bulk-editor__aggregate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-spacing-xxs);
}

.wd-kanban-bulk-editor__aggregate-label {
  color: var(--wd-muted-fg);
  font-weight: var(--sx-fontWeightRegular);
}

.wd-kanban-bulk-editor__aggregate-value {
  color: var(--wd-fg);
  font-weight: var(--sx-fontWeightSemibold);
}

.wd-kanban-bulk-editor__permission {
  margin-block-start: var(--sx-spacing-xxs);
  color: var(--sx-colorStatusWarningForeground1, var(--wd-muted-fg));
}

.wd-kanban-bulk-result {
  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-s);
  border: var(--sx-border-width-thin) solid var(--wd-border);
  border-radius: var(--sx-borderRadiusMedium);
  background: var(--wd-card-bg);
  color: var(--wd-fg);
}

.wd-kanban-bulk-result:not(.wd-kanban-bulk-result--dialog) {
  position: fixed;
  z-index: var(--sx-zIndexOverlay);
  inset-inline-end: var(--sx-spacing-l);
  inset-block-end: var(--sx-spacing-l);
  inline-size: min(32rem, calc(100vw - 2 * var(--sx-spacing-l)));
  padding: var(--sx-spacing-m);
  box-shadow: var(--sx-shadow-overlay);
}

.wd-kanban-bulk-result--dialog {
  padding: var(--sx-spacing-m);
  background: var(--wd-muted-bg);
}

.wd-kanban-bulk-result__summary {
  display: flex;
  align-items: center;
  gap: var(--sx-spacing-s);
  font-weight: var(--sx-fontWeightSemibold);
}

.wd-kanban-bulk-result__items {
  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-xs);
}

/* One block per reason, not per task: the tasks a single rule caught are listed under one account
   of it, so five cards refused by one rule cannot read as five unrelated failures. */
.wd-kanban-bulk-result__group {
  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-xxs);
  padding-block-start: var(--sx-spacing-xs);
  border-block-start: var(--sx-border-width-thin) solid var(--wd-border);
  color: var(--wd-muted-fg);
  font-size: var(--sx-font-size-small);
}

.wd-kanban-bulk-result__group-head {
  display: flex;
  align-items: center;
  gap: var(--sx-spacing-s);
  flex-wrap: wrap;
}

.wd-kanban-bulk-result__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-spacing-xs);
}

.wd-kanban-bulk-result__group--refused .wd-kanban-bulk-result__status {
  color: var(--sx-colorStatusWarningForeground1);
}

.wd-kanban-bulk-result__group--failed .wd-kanban-bulk-result__status {
  color: var(--sx-colorStatusDangerForeground1);
}

.wd-kanban-bulk-result__shared {
  color: var(--wd-muted-fg);
  font-weight: var(--sx-fontWeightSemibold);
}

.wd-kanban-bulk-result__reason {
  margin: 0;
  color: var(--wd-fg);
}

.wd-kanban-bulk-result__tasks {
  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-kanban-bulk-result__task {
  overflow: hidden;
  color: var(--wd-fg);
  font-weight: var(--sx-fontWeightSemibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-kanban-bulk-confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-m);
  color: var(--wd-muted-fg);
}

.wd-kanban-bulk-confirmation__danger-action {
  color: var(--sx-colorNeutralForegroundOnBrand);
  background: var(--sx-colorStatusDangerForeground1);
}

.wd-kanban-bulk-confirmation__danger-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sx-colorStatusDangerForeground1) 86%, var(--wd-card-bg));
}

.wd-kanban-bulk-confirmation__warning-action {
  color: var(--sx-colorStatusWarningForeground1);
  background: var(--sx-colorStatusWarningBackground1);
}

.wd-kanban-bulk-confirmation__warning-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sx-colorStatusWarningBackground1) 86%, var(--wd-card-bg));
}

@media (min-width: 64rem) {
  .wd-kanban-bulk-editor__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .wd-kanban-bulk-editor__scroll {
    padding: var(--sx-spacing-m);
  }

  .wd-kanban-bulk-result__group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
  }
}

.wd-desk-work-page {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 2.5rem;
  color: var(--wd-fg);
  background: var(--wd-bg);
}

.wd-desk-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-desk-loading__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.wd-desk-loading i {
  color: var(--wd-primary);
  font-size: 2rem;
  animation: wd-desk-spin 1s linear infinite;
}

.wd-desk-loading p {
  margin: 0;
  color: var(--wd-muted-fg);
  font-size: var(--sx-font-size-xs, 0.75rem);
  font-weight: var(--sx-font-weight-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-desk-loading--error i {
  color: var(--wd-danger, #d14343);
  animation: none;
}

.wd-desk-loading--error span {
  max-width: 36rem;
  color: var(--wd-muted-fg);
  font-size: var(--sx-font-size-sm, 0.875rem);
  text-align: center;
}

.wd-desk-loading--error button {
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wd-border);
  border-radius: var(--sx-radius-md, 0.5rem);
  color: var(--wd-fg);
  background: var(--wd-surface);
  font: inherit;
  cursor: pointer;
}

.wd-desk-loading--error button:hover {
  border-color: var(--wd-primary);
}

.wd-desk-loading--error button:focus-visible {
  outline: 2px solid var(--wd-primary);
  outline-offset: 2px;
}

@keyframes wd-desk-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.wd-desk-kicker {
  margin: 0 0 0.25rem;
  color: var(--wd-muted-fg);
  font-size: 0.6875rem;
  font-weight: var(--sx-font-weight-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-desk-icon-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wd-border);
  border-radius: 0.5rem;
  color: var(--wd-muted-fg);
  background: var(--wd-card-bg);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wd-desk-icon-button:hover {
  border-color: color-mix(in srgb, var(--wd-primary) 35%, var(--wd-border));
  color: var(--wd-primary);
  background: color-mix(in srgb, var(--wd-primary) 6%, var(--wd-card-bg));
}

.wd-insights-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, #10b981 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #10b981 10%, transparent);
  color: #047857;
  font-size: var(--sx-font-size-xs, 0.75rem);
  font-weight: var(--sx-font-weight-semibold, 600);
  white-space: nowrap;
}

.wd-insights-live-pill i {
  font-size: 0.9375rem;
}

.wd-desk-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.75rem, 100%), 1fr));
  gap: 0.75rem;
}

.wd-desk-metric,
.wd-desk-panel,
.wd-desk-focus-card {
  border: 1px solid var(--wd-border);
  border-radius: 0.5rem;
  background: var(--wd-card-bg);
}

.wd-desk-metric {
  min-height: 4.875rem;
  padding: 0.75rem;
}

.wd-desk-metric-label,
.wd-desk-metric-hint {
  color: var(--wd-muted-fg);
  font-size: var(--sx-font-size-xs, 0.75rem);
  font-weight: var(--sx-font-weight-medium, 500);
}

.wd-desk-metric-value {
  margin-top: 0.375rem;
  color: var(--wd-fg);
  font-size: var(--sx-font-size-xl, 1.5rem);
  line-height: 1;
  font-weight: var(--sx-font-weight-bold, 700);
  letter-spacing: 0;
}

.wd-desk-metric-hint {
  margin-top: 0.5rem;
  font-weight: var(--sx-font-weight-semibold, 600);
}

.wd-desk-focus-card {
  padding: 1rem;
  border-color: color-mix(in srgb, var(--wd-primary) 35%, var(--wd-border));
  box-shadow: 0 1rem 2.625rem color-mix(in srgb, var(--wd-primary) 10%, transparent);
}

.wd-desk-section-head,
.wd-desk-panel-head,
.wd-desk-task-row,
.wd-desk-task-card,
.wd-desk-action-row,
.wd-desk-feed-row,
.wd-desk-doc-row {
  display: flex;
}

.wd-desk-section-head,
.wd-desk-panel-head {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wd-desk-section-title {
  margin: 0;
  color: var(--sx-group-title-color, var(--wd-fg));
  font-size: var(--sx-group-title-font-size, 0.875rem);
  line-height: var(--sx-group-title-line-height, 1.4);
  font-weight: var(--sx-group-title-font-weight, 800);
  letter-spacing: 0;
}

.wd-desk-focus-count,
.wd-desk-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 1.625rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wd-primary) 10%, transparent);
  color: var(--wd-primary);
  font-size: 0.75rem;
  font-weight: var(--sx-font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.wd-desk-focus-count-warn {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.wd-desk-focus-list,
.wd-desk-milestone-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.wd-desk-milestone-list-expanded {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.wd-desk-section-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.wd-desk-text-button {
  border: 0;
  background: transparent;
  color: var(--wd-primary);
  padding: 0.25rem 0.375rem;
  font-size: 0.75rem;
  font-weight: var(--sx-font-weight-semibold, 600);
}

.wd-desk-empty-focus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 7.5rem;
  margin-top: 1rem;
  border: 1px dashed color-mix(in srgb, var(--wd-primary) 30%, var(--wd-border));
  border-radius: 0.5rem;
  color: var(--wd-muted-fg);
  font-weight: var(--sx-font-weight-medium, 500);
}

.wd-desk-empty-focus i {
  color: var(--wd-primary);
  font-size: 1.25rem;
}

.wd-desk-focus-overflow {
  margin-top: 0.75rem;
  color: #b45309;
  font-size: 0.75rem;
  font-weight: var(--sx-font-weight-semibold, 600);
}

.wd-desk-quick-add,
.wd-desk-inline-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.wd-desk-quick-add input,
.wd-desk-inline-add input {
  min-width: 0;
  flex: 1;
  height: 2.25rem;
  border: 1px solid var(--wd-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--wd-surface-subtle) 45%, transparent);
  color: var(--wd-fg);
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--sx-font-weight-normal, 400);
}

.wd-desk-quick-add input:focus,
.wd-desk-inline-add input:focus {
  outline: 2px solid color-mix(in srgb, var(--wd-primary) 24%, transparent);
  outline-offset: 0.125rem;
  border-color: color-mix(in srgb, var(--wd-primary) 52%, var(--wd-border));
}

.wd-desk-quick-add button,
.wd-desk-inline-add button {
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--wd-primary);
  color: var(--wd-primary-fg);
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: var(--sx-font-weight-semibold, 600);
}

.wd-desk-quick-add button:disabled,
.wd-desk-inline-add button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wd-desk-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.wd-desk-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.wd-desk-panel {
  overflow: hidden;
}

.wd-desk-panel-head {
  min-height: 2.875rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--wd-border);
  background: color-mix(in srgb, var(--wd-surface-subtle) 52%, transparent);
}

.wd-desk-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--sx-group-title-color, var(--wd-fg));
  font-size: var(--sx-group-title-font-size, 0.875rem);
  line-height: var(--sx-group-title-line-height, 1.4);
  font-weight: var(--sx-group-title-font-weight, 800);
}

.wd-desk-panel-title i {
  color: var(--wd-muted-fg);
}

.wd-desk-panel-count {
  min-width: 1.75rem;
  height: 1.375rem;
  color: var(--wd-muted-fg);
  background: color-mix(in srgb, var(--wd-surface-subtle) 80%, transparent);
  font-size: 0.6875rem;
}

.wd-desk-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem;
}

.wd-desk-task-card,
.wd-desk-task-row,
.wd-desk-action-row,
.wd-desk-feed-row,
.wd-desk-doc-row {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wd-desk-task-card:hover,
.wd-desk-task-row:hover,
.wd-desk-action-row:hover,
.wd-desk-feed-row:hover,
.wd-desk-doc-row:hover {
  border-color: color-mix(in srgb, var(--wd-primary) 24%, var(--wd-border));
  background: color-mix(in srgb, var(--wd-primary) 5%, transparent);
}

.wd-desk-task-card {
  flex-direction: column;
  justify-content: space-between;
  min-height: 10rem;
  padding: 0.875rem;
  background: color-mix(in srgb, var(--wd-card-bg) 80%, var(--wd-surface-subtle));
}

.wd-desk-task-card-focus {
  border-color: color-mix(in srgb, var(--wd-primary) 18%, var(--wd-border));
}

.wd-desk-task-main,
.wd-desk-row-main {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.wd-desk-task-id {
  display: block;
  color: var(--wd-primary);
  font-size: 0.6875rem;
  font-weight: var(--sx-font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.wd-desk-task-title,
.wd-desk-row-title {
  display: block;
  margin-top: 0.25rem;
  color: var(--wd-fg);
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: var(--sx-font-weight-semibold, 600);
  overflow-wrap: anywhere;
}

.wd-desk-task-meta,
.wd-desk-row-meta,
.wd-desk-row-foot {
  display: block;
  margin-top: 0.25rem;
  color: var(--wd-muted-fg);
  font-size: 0.71875rem;
  line-height: 1.3;
  font-weight: var(--sx-font-weight-normal, 400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-desk-row-foot {
  font-size: 0.6875rem;
  opacity: 0.82;
}

.wd-desk-task-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.wd-desk-task-row {
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem;
}

.wd-desk-row-main {
  flex: 1;
}

.wd-desk-row-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.wd-desk-action-row,
.wd-desk-feed-row,
.wd-desk-doc-row {
  flex-direction: column;
  padding: 0.625rem;
}

.wd-desk-action-type,
.wd-desk-chip,
.wd-desk-importance {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: var(--sx-font-weight-semibold, 600);
}

.wd-desk-action-type {
  color: #7c2d12;
  background: color-mix(in srgb, #f97316 14%, transparent);
}

.wd-desk-chip,
.wd-desk-importance-normal {
  color: var(--wd-muted-fg);
  background: color-mix(in srgb, var(--wd-surface-subtle) 75%, transparent);
}

.wd-desk-chip-warn {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
}

.wd-desk-importance-important {
  color: #a16207;
  background: color-mix(in srgb, #eab308 16%, transparent);
}

.wd-desk-importance-focus {
  color: var(--sx-colorBrandForeground1, var(--wd-primary));
  background: color-mix(in srgb, var(--sx-colorBrandBackground1, var(--wd-primary)) 14%, transparent);
}

.wd-desk-empty {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--wd-muted-fg);
  font-size: 0.8125rem;
  font-weight: var(--sx-font-weight-medium, 500);
}

.wd-desk-inline-add {
  margin: 0 0 0.375rem;
}

.wd-desk-inline-add button {
  width: 2.25rem;
  padding: 0;
}

@media (min-width: 48rem) {
  .wd-desk-work-page {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 72rem) {
  .wd-desk-focus-list,
  .wd-desk-milestone-list,
  .wd-desk-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .wd-desk-focus-list,
  .wd-desk-milestone-list,
  .wd-desk-work-grid {
    grid-template-columns: 1fr;
  }

  .wd-desk-quick-add {
    align-items: stretch;
    flex-direction: column;
  }

  .wd-desk-quick-add button {
    width: 100%;
  }
}
.sx-nav-menu-group-header[data-wd-workspace-icon="true"] > .sx-nav-menu-icon-slot .sx-nav-menu-icon-button,
.sx-nav-menu-group-header[data-wd-workspace-icon="true"] > .sx-nav-menu-icon-slot .sx-nav-menu-context-trigger-icon {
    display: none !important;
}

.sx-nav-menu-group-header[data-wd-workspace-icon="true"] > .sx-nav-menu-icon-slot:not(:has(.sx-nav-menu-context-trigger))::before,
.sx-nav-menu-group-header[data-wd-workspace-icon="true"] .sx-nav-menu-context-trigger::before {
    content: var(--wd-workspace-icon-content, "?");
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--wd-workspace-icon-bg, var(--sx-colorBrandBackground2, var(--wd-surface-subtle)));
    color: var(--wd-workspace-icon-fg, var(--sx-colorBrandForeground1, var(--wd-primary)));
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-workspace-icon-fg, var(--wd-primary)) 14%, transparent);
    text-transform: uppercase;
}

.sx-nav-menu-group-header[data-wd-workspace-icon="true"] .sx-nav-menu-context-trigger {
    isolation: isolate;
}

.sx-nav-menu-group-header[data-wd-workspace-shared="true"] > .sx-nav-menu-icon-slot:not(:has(.sx-nav-menu-context-trigger))::before,
.sx-nav-menu-group-header[data-wd-workspace-shared="true"] .sx-nav-menu-context-trigger::before {
    content: "";
}

.sx-nav-menu-group-header[data-wd-workspace-shared="true"] > .sx-nav-menu-icon-slot:not(:has(.sx-nav-menu-context-trigger))::after,
.sx-nav-menu-group-header[data-wd-workspace-shared="true"] .sx-nav-menu-context-trigger::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 0.875rem;
    border-radius: 999px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 20%, var(--wd-workspace-icon-fg, var(--wd-primary)) 0 0.125rem, transparent 0.15625rem),
        radial-gradient(circle at 22% 80%, var(--wd-workspace-icon-fg, var(--wd-primary)) 0 0.125rem, transparent 0.15625rem),
        radial-gradient(circle at 78% 80%, var(--wd-workspace-icon-fg, var(--wd-primary)) 0 0.125rem, transparent 0.15625rem),
        linear-gradient(34deg, transparent 0 46%, var(--wd-workspace-icon-fg, var(--wd-primary)) 47% 53%, transparent 54%),
        linear-gradient(-34deg, transparent 0 46%, var(--wd-workspace-icon-fg, var(--wd-primary)) 47% 53%, transparent 54%);
}

/* ------------------------------------------------------------------------
   Hub navigation-bar global actions (search + create) and the Spotlight-style
   search overlay. Rendered on every Hub page via SxAppShell.NavBarRightContent.
   ------------------------------------------------------------------------ */

.wd-hub-navbar-actions {
    flex: 0 0 auto;
}

.sx-dialog-overlay.sx-dialog-overlay--viewport.wd-hub-spotlight {
    --wd-hub-search-viewport-gutter:
        max(
            var(--sx-spacing-md),
            var(--sx-safe-area-inset-left),
            var(--sx-safe-area-inset-right)
        );
    align-items: flex-start;
    padding-top: calc(var(--wd-hub-search-main-top, 0) + var(--sx-spacing-sm));
    padding-right: var(--wd-hub-search-viewport-gutter);
    padding-bottom: calc(var(--wd-hub-search-main-bottom, 0) + var(--sx-spacing-md));
    padding-left: var(--wd-hub-search-viewport-gutter);
}

.sx-dialog-overlay.wd-hub-spotlight > .sx-dialog {
    container-type: inline-size;
    max-width: 60rem;
    min-width: 0;
    min-height: 0;
}

.sx-dialog-overlay.wd-hub-spotlight > .sx-dialog > .sx-dialog-header {
    display: none;
}

.sx-dialog-overlay.wd-hub-spotlight > .sx-dialog > .sx-dialog-body {
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.wd-hub-spotlight-body {
    width: 100%;
    height: auto;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.wd-hub-spotlight-query {
    --sx-input-adaptive-width: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--sx-spacing-md) var(--sx-spacing-md) var(--sx-spacing-sm);
}

.wd-hub-spotlight-query > .sx-input-group.wd-hub-spotlight-input,
.wd-hub-spotlight-query > .sx-input-group.wd-hub-spotlight-input > .sx-input-adaptive-shell,
.wd-hub-spotlight-query > .sx-input-group.wd-hub-spotlight-input > .sx-input-adaptive-shell > .sx-input-adaptive-field,
.wd-hub-spotlight-query .wd-hub-spotlight-input .sx-input-wrapper {
    flex: 1 1 auto;
    inline-size: 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.wd-hub-spotlight-status {
    min-width: 0;
    min-height: var(--sx-control-height-sm);
    display: flex;
    align-items: center;
}

.wd-hub-spotlight-hint {
    min-width: 0;
    color: var(--sx-color-neutral-foreground-3);
    padding: var(--sx-spacing-sm) var(--sx-spacing-xs) 0;
}

.wd-hub-spotlight-hint--error {
    color: var(--sx-color-status-danger-foreground-1, var(--sx-color-neutral-foreground-1));
}

.wd-hub-spotlight-results {
    align-self: start;
    width: 100%;
    max-height: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0 var(--sx-spacing-md) var(--sx-spacing-sm);
    border-block: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-2);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row {
    width: 100%;
    min-width: 0;
    min-height: var(--sx-control-height-lg);
    flex: 0 0 auto;
    justify-content: flex-start;
    text-align: start;
    height: auto;
    white-space: normal;
    overflow: visible;
    padding: var(--sx-spacing-sm) var(--sx-spacing-md);
    border-radius: var(--sx-radius-sm);
    border: 0;
    border-bottom: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-2);
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row
    > .sx-btn-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: visible;
    white-space: normal;
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row:last-child {
    border-bottom: 0;
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row:hover {
    background: var(--sx-color-neutral-background-2-hover);
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row:focus-visible {
    box-shadow: var(--sx-focus-ring-shadow);
}

.sx-dialog-overlay.wd-hub-spotlight
    .wd-hub-spotlight-results
    > .sx-btn.wd-hub-spotlight-result-row--selected {
    color: var(--sx-color-neutral-foreground-on-selected, var(--sx-color-neutral-foreground-1));
    background: var(--sx-color-neutral-background-selected, var(--sx-color-neutral-background-2));
    box-shadow: inset var(--sx-border-width-thick) 0 0 var(--sx-color-brand-stroke-1);
}

.wd-hub-spotlight-result {
    display: grid;
    grid-template-columns: var(--sx-control-height-sm) minmax(0, 1fr);
    align-items: start;
    gap: var(--sx-spacing-md);
    width: 100%;
    min-width: 0;
}

.wd-hub-spotlight-result-leading {
    width: var(--sx-control-height-sm);
    min-width: 0;
    min-height: var(--sx-control-height-sm);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wd-hub-spotlight-result-icon {
    color: var(--sx-color-brand-foreground-1);
}

.wd-hub-spotlight-result-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
}

.wd-hub-spotlight-result-heading {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs) var(--sx-spacing-sm);
}

.wd-hub-spotlight-result-title {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--sx-color-neutral-foreground-1);
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wd-hub-spotlight-result-meta {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs) var(--sx-spacing-sm);
}

.wd-hub-spotlight-result-id {
    min-width: 0;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sx-color-neutral-foreground-2);
    font-family: var(--sx-font-family-monospace);
}

@container (max-width: 40rem) {
    .sx-dialog-overlay.wd-hub-spotlight
        .wd-hub-spotlight-results
        > .sx-btn.wd-hub-spotlight-result-row {
        padding-inline: var(--sx-spacing-sm);
    }

    .wd-hub-spotlight-result-heading,
    .wd-hub-spotlight-result-meta {
        align-items: flex-start;
    }

    .wd-hub-spotlight-result-title,
    .wd-hub-spotlight-result-meta {
        width: 100%;
        flex-basis: 100%;
    }

}

/* EG_IT-638: a task an administrator pushed past its own gate must be recognisable as such at a
   glance. This sits at the top of the task body, above the tabs, and never collapses — the whole
   point is that a reader cannot miss it or have to go looking in the activity trail. */
.wd-task-governance-override {
    margin: var(--sx-spacing-md, 1rem) var(--sx-spacing-md, 1rem) 0;
    padding: var(--sx-spacing-md, 1rem);
    border: 0.0625rem solid var(--wd-danger);
    border-inline-start-width: var(--sx-spacing-xs, 0.25rem);
    border-radius: var(--sx-borderRadiusLarge, 0.75rem);
    background: color-mix(in srgb, var(--wd-danger) 8%, transparent);
    color: var(--wd-fg);
}

.wd-task-governance-override__header {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-sm, 0.5rem);
}

.wd-task-governance-override__icon {
    color: var(--wd-danger);
    flex: 0 0 auto;
}

.wd-task-governance-override__title {
    font-weight: var(--sx-fontWeightSemibold, 600);
    color: var(--wd-danger);
}

.wd-task-governance-override__list {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-sm, 0.5rem);
    margin: var(--sx-spacing-sm, 0.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.wd-task-governance-override__item {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs, 0.125rem);
    padding-top: var(--sx-spacing-sm, 0.5rem);
    border-top: 0.0625rem solid var(--wd-border);
    font-size: var(--sx-font-size-small);
}

.wd-task-governance-override__item:first-child {
    padding-top: 0;
    border-top: none;
}

.wd-task-governance-override__change {
    font-weight: var(--sx-fontWeightSemibold, 600);
}

.wd-task-governance-override__bypassed,
.wd-task-governance-override__reason {
    color: var(--wd-fg);
}

.wd-task-governance-override__who {
    color: var(--wd-muted-fg);
}

.wd-task-governance-override__self {
    margin-top: var(--sx-spacing-xxs, 0.125rem);
    font-weight: var(--sx-fontWeightSemibold, 600);
    color: var(--wd-danger);
}
/* ---------------------------------------------------------------------------
   Rendered Markdown surfaces.

   Two surfaces show the same task description: the Preview tab, which is
   server-rendered to HTML by Markdig, and the Rich Text tab, whose content
   lives inside Vditor's `.vditor-reset` element. Markdig's HTML is complete
   (headings, tables, task lists, fenced code), but the page reset used by
   Workdesk (Tailwind preflight) sets `h1..h6 { font-size: inherit }`,
   `ol, ul { list-style: none; padding: 0 }` and `margin: 0` on every block
   element, so a preview with no content styles of its own collapses into one
   flat wall of text while the editor beside it keeps its structure.

   Both surfaces are therefore styled from this one rule set: the preview gets
   the structure back, and the editor stops using Vditor's built-in palette,
   which is hard-coded for a light background and is unreadable under the dark
   theme. Metrics follow Vditor's own scale so the two tabs stay
   interchangeable; colours, spacing and radii come from design tokens so both
   follow the active theme.

   Every property is stated explicitly rather than left to the browser default,
   because the two hosts do not agree on whether the reset is loaded.
   --------------------------------------------------------------------------- */

/* The metrics live in custom properties so that a surface can restate its scale
   in one place instead of re-specifying every heading. `:is()` takes the
   specificity of its most specific argument, so every rule below sits at
   (0,2,x); a variant written as a plain class would be less specific than the
   rules it means to override and would lose silently. Re-pointing these
   properties is therefore the only reliable way to rescale a surface. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) {
    --wd-markdown-font-size: var(--sx-font-size-normal);
    --wd-markdown-line-height: var(--sx-line-height-body);
    --wd-markdown-block-gap: var(--sx-spacing-lg);
    --wd-markdown-list-gap: var(--sx-spacing-xs);
    --wd-markdown-heading-gap-top: var(--sx-spacing-xl);
    --wd-markdown-heading-gap-bottom: var(--sx-spacing-lg);
    --wd-markdown-h1-size: calc(var(--sx-font-size-normal) * 1.75);
    --wd-markdown-h2-size: calc(var(--sx-font-size-normal) * 1.55);
    --wd-markdown-h3-size: calc(var(--sx-font-size-normal) * 1.38);
    --wd-markdown-h4-size: var(--sx-font-size-large);
    --wd-markdown-h5-size: calc(var(--sx-font-size-normal) * 1.13);
    --wd-markdown-h6-size: var(--sx-font-size-normal);

    color: var(--wd-fg);
    font-family: var(--sx-font-family-base);
    font-size: var(--wd-markdown-font-size);
    line-height: var(--wd-markdown-line-height);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Vertical rhythm. Block elements carry bottom margin only; the last child
   trims its margin so the surface does not end with dead space. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    :is(p, ul, ol, blockquote, pre, table, dl) {
    margin-top: 0;
    margin-bottom: var(--wd-markdown-block-gap);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) > :last-child {
    margin-bottom: 0;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) > :first-child {
    margin-top: 0;
}

/* Headings. Tailwind preflight collapses every level to body size and weight,
   which is what makes a structured description unreadable in the preview. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--wd-markdown-heading-gap-top);
    margin-bottom: var(--wd-markdown-heading-gap-bottom);
    color: var(--wd-fg);
    font-weight: var(--sx-fontWeightSemibold);
    line-height: var(--sx-line-height-tight);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h1 {
    font-size: var(--wd-markdown-h1-size);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h2 {
    font-size: var(--wd-markdown-h2-size);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h3 {
    font-size: var(--wd-markdown-h3-size);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h4 {
    font-size: var(--wd-markdown-h4-size);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h5 {
    font-size: var(--wd-markdown-h5-size);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) h6 {
    font-size: var(--wd-markdown-h6-size);
    color: var(--wd-muted-fg);
}

/* h1/h2 carry a rule so the top-level sections of a long description are
   findable when scrolling. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) :is(h1, h2) {
    padding-bottom: var(--sx-spacing-xs);
    border-bottom: 1px solid var(--wd-border);
}

/* Lists. Markers and indentation are both removed by the reset. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) :is(ul, ol) {
    padding-left: calc(var(--sx-spacing-lg) * 2);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) ul {
    list-style-type: disc;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) ul ul {
    list-style-type: circle;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) ul ul ul {
    list-style-type: square;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) ol {
    list-style-type: decimal;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) li + li {
    margin-top: var(--wd-markdown-list-gap);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) li :is(ul, ol) {
    margin-top: var(--wd-markdown-list-gap);
    margin-bottom: 0;
}

/* Task lists. Markdig emits `ul.contains-task-list > li.task-list-item`;
   Vditor emits `li.vditor-task`. Both are pulled to the same shape so an
   acceptance checklist reads identically on either tab. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    :is(.contains-task-list, .task-list-item, .vditor-task) {
    list-style: none;
}

/* The preview's checkboxes are rendered disabled, which greys a ticked box out
   until it is hard to tell from an unticked one. A ticked acceptance criterion
   has to be legible at a glance, so the accent colour and full opacity are
   restored; the box stays non-interactive. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    :is(.task-list-item, .vditor-task) > input[type="checkbox"] {
    margin: 0 var(--sx-spacing-xs) var(--sx-spacing-xxs)
        calc(var(--sx-spacing-lg) * -1.6);
    accent-color: var(--wd-primary);
    opacity: 1;
    vertical-align: middle;
}

/* Quotes. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) blockquote {
    padding: 0 var(--sx-spacing-lg);
    border-left: var(--sx-spacing-xs) solid var(--wd-border);
    color: var(--wd-muted-fg);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    blockquote
    > :first-child {
    margin-top: 0;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    blockquote
    > :last-child {
    margin-bottom: 0;
}

/* Horizontal rules. A bare `hr` is invisible once preflight has zeroed its
   margins, so a section break in the description reads as a missing line. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) hr {
    height: var(--sx-spacing-xxs);
    margin-block: var(--sx-spacing-xl);
    padding: 0;
    border: 0;
    background-color: var(--wd-border);
}

/* Tables. Vditor lays tables out as a `display: block` strip whose cells never
   wrap; a five-column table of Chinese text then scrolls sideways out of view.
   A real table that wraps its cells keeps the whole comparison on screen. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    :is(td, th) {
    padding: var(--sx-spacing-xs) var(--sx-spacing-md);
    border: 1px solid var(--wd-border);
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) th {
    background-color: var(--sx-colorNeutralBackground3);
    font-weight: var(--sx-fontWeightSemibold);
    text-align: left;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) th[align="center"],
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    th[style*="center"] {
    text-align: center;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) tr {
    background-color: transparent;
    border-top: 0;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    tbody
    tr:nth-child(2n) {
    background-color: var(--sx-colorNeutralBackground2);
}

/* Code. Inline spans and fenced blocks; no syntax colouring is applied here,
   because loading a highlighter would put a large asset on the page's critical
   path. */
/* The `:not()` pair mirrors Vditor's own code selector. Matching its shape is
   what lets these declarations win, and it leaves a highlighted block to the
   highlighter's own theme, which is the one thing that should override. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    code:not(.hljs):not(.highlight-chroma) {
    padding: var(--sx-spacing-xxs) var(--sx-spacing-xs);
    border-radius: var(--sx-radius-sm);
    background-color: var(--sx-colorNeutralBackground3);
    color: var(--wd-fg);
    font-family: var(--sx-font-family-code);
    font-size: var(--sx-font-size-medium);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) pre {
    overflow: auto;
    max-width: 100%;
    padding: var(--sx-spacing-md);
    border: 1px solid var(--wd-border);
    border-radius: var(--sx-radius-md);
    background-color: var(--sx-colorNeutralBackground3);
    background-image: none;
}

/* Inside a fence the block itself draws the frame, so the code element only
   carries type. The second selector covers a block the highlighter has taken
   over, so a highlighted block keeps the same frame as an unhighlighted one
   and contributes colour only. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    pre
    > code:not(.hljs):not(.highlight-chroma),
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset)
    pre
    > code.hljs {
    display: block;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    font-family: var(--sx-font-family-code);
    font-size: var(--sx-font-size-medium);
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    line-height: var(--sx-line-height-compact);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) kbd {
    padding: var(--sx-spacing-xxs) var(--sx-spacing-xs);
    border: 1px solid var(--wd-border);
    border-radius: var(--sx-radius-sm);
    background-color: var(--sx-colorNeutralBackground3);
    color: var(--wd-fg);
    font-family: var(--sx-font-family-code);
    font-size: var(--sx-font-size-medium);
}

/* Links. Preflight sets `color: inherit`, which leaves a link looking exactly
   like the sentence around it. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) a {
    color: var(--wd-primary);
    text-decoration: underline;
    text-underline-offset: var(--sx-spacing-xxs);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sx-radius-sm);
}

:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset) :is(strong, b) {
    font-weight: var(--sx-fontWeightSemibold);
}

/* The preview holds Markdig output, so it needs the content styles above and
   the wrapping guarantees that keep a pasted URL or a long identifier from
   pushing the card sideways. */
.wd-task-description-preview.wd-markdown-body {
    min-width: 0;
}

/* Compact variant.

   The description surfaces are the page's main subject and are read at full
   size. The other Markdown surfaces are not: a run-cycle summary is a panel
   inside a collapsible card, and the external-metadata preview is a dialog
   pane. Both are read as supporting detail beside something else, and both are
   short. At the full scale a single `#` heading renders at 1.75rem inside a
   card whose body text is smaller than that, so the heading stops reading as
   structure and starts reading as the card's own title.

   The variant therefore rescales rather than restyles: the structure the reset
   removed is still restored — markers, rules, borders, code frames — only the
   type scale and the vertical rhythm are pulled in. Headings are sized in `em`
   so they follow this surface's own body size instead of the page's, which
   keeps one heading step visible at any density.

   The `:is()` prefix is not decoration. It carries the specificity of its most
   specific argument, which puts this rule at (0,3,0) — above the (0,2,0) of
   the rules it overrides. A bare `.wd-markdown-body--compact` would sit at
   (0,1,0) and never take effect. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset).wd-markdown-body--compact {
    --wd-markdown-font-size: var(--sx-font-size-medium);
    --wd-markdown-line-height: var(--sx-line-height-compact);
    --wd-markdown-block-gap: var(--sx-spacing-sm);
    --wd-markdown-list-gap: var(--sx-spacing-xxs);
    --wd-markdown-heading-gap-top: var(--sx-spacing-md);
    --wd-markdown-heading-gap-bottom: var(--sx-spacing-xs);
    --wd-markdown-h1-size: 1.3em;
    --wd-markdown-h2-size: 1.2em;
    --wd-markdown-h3-size: 1.12em;
    --wd-markdown-h4-size: 1.06em;
    --wd-markdown-h5-size: 1em;
    --wd-markdown-h6-size: 1em;

    min-width: 0;
}

/* A heading is the first thing in one of these panels often enough that the
   default top margin would open a gap above it, and the panel's own padding
   already provides that space. */
:is(.wd-markdown-body, .wd-task-description-wysiwyg .vditor-reset).wd-markdown-body--compact
    > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Vditor ships a single light palette: its editing surface is a white panel
   with dark text, whatever theme the rest of the page is using. That is why
   the description editor reads as a white island under the dark theme, and it
   is also why the rendered text above cannot simply take its colour from the
   theme — light text on Vditor's white panel would disappear.

   Vditor drives its whole appearance from custom properties on the editor
   root, so pointing those at design tokens themes the editor without touching
   its behaviour. Scoped to the task description editor. */
.wd-task-description-wysiwyg.vditor {
    --border-color: var(--wd-border);
    --second-color: var(--wd-muted-fg);
    --panel-background-color: var(--wd-card-bg);
    --panel-shadow: var(--sx-shadow-sm);
    --toolbar-background-color: var(--sx-colorNeutralBackground3);
    --toolbar-icon-color: var(--wd-muted-fg);
    --toolbar-icon-hover-color: var(--wd-primary);
    --textarea-background-color: var(--wd-card-bg);
    --textarea-text-color: var(--wd-fg);
    --count-background-color: var(--wd-hover-bg);
    --heading-border-color: var(--wd-border);
    --blockquote-color: var(--wd-muted-fg);
}

/* ---------------------------------------------------------------------------
   Task participants panel (EG_IT-650)

   Sibling of the activity panel in the task detail sidebar rail. It reuses the
   activity panel's header classes so the two tabs line up pixel-for-pixel when
   the reader switches between them; everything below the header is its own.

   All colours resolve through the --wd-* aliases, which are themselves defined
   in terms of --sx-* design tokens at the top of this file, so light, dark and
   the named themes are covered without a per-theme rule here.
   --------------------------------------------------------------------------- */
.wd-task-participants {
    /* The rail is user-resizable, so the panel measures itself rather than the
       viewport — a narrow rail on a wide screen still gets the stacked layout. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--wd-bg);
    --wd-activity-inline-padding: var(--sx-spacing-md, 1rem);
}

/* Headline counts. Deliberately louder than the hint below it: this is the line that
   answers "how many people and agents are on this" without any interaction. */
.wd-task-participants__counts {
    margin: 0;
    padding: 0 var(--wd-activity-inline-padding, 1rem) 0.125rem;
    color: var(--wd-fg);
    font-size: var(--sx-type-body-font-size, 0.875rem);
    font-weight: 600;
    line-height: 1.4;
    flex: 0 0 auto;
    overflow-wrap: anywhere;
}

.wd-task-participants__hint {
    margin: 0;
    padding: 0 var(--wd-activity-inline-padding, 1rem) 0.5rem;
    color: var(--wd-muted-fg);
    font-size: var(--sx-type-caption-font-size, 0.75rem);
    line-height: 1.4;
    flex: 0 0 auto;
}

.wd-task-participants__scope {
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--wd-activity-inline-padding, 1rem) 0.625rem;
    flex: 0 0 auto;
}

.wd-task-participants__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--wd-activity-inline-padding, 1rem) 1rem;
}

.wd-task-participants__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--wd-muted-fg);
    font-size: var(--sx-type-caption-font-size, 0.75rem);
    text-align: center;
}

.wd-task-participants__state--empty {
    flex-direction: column;
    gap: 0.75rem;
}

.wd-task-participants__empty-icon {
    font-size: 2rem;
    opacity: 0.35;
}

.wd-task-participants__state--error {
    color: var(--wd-danger);
}

.wd-task-participants__rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wd-task-participants__row {
    border: 1px solid var(--wd-border);
    border-radius: var(--sx-borderRadiusLarge, 0.75rem);
    background: var(--wd-card-bg);
    overflow: hidden;
}

/* A participant who has walked away is still readable, just visibly quieter —
   the distinction has to survive greyscale and colour-blind vision, so it is
   carried by the explicit presence label as well as by this tint. */
.wd-task-participants__row--past {
    background: var(--wd-surface-subtle);
}

.wd-task-participants__summary {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.wd-task-participants__summary:hover {
    background: var(--wd-hover-bg);
}

.wd-task-participants__summary:focus-visible {
    outline: 0.125rem solid var(--wd-primary);
    outline-offset: -0.125rem;
}

.wd-task-participants__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wd-primary) 12%, transparent);
    color: var(--wd-primary);
    font-size: var(--sx-type-caption-font-size, 0.75rem);
    font-weight: 600;
}

.wd-task-participants__avatar--agent {
    background: color-mix(in srgb, var(--wd-fg) 10%, transparent);
    color: var(--wd-fg);
}

.wd-task-participants__identity {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.wd-task-participants__name-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.wd-task-participants__name {
    color: var(--wd-fg);
    font-size: var(--sx-type-body-font-size, 0.875rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-task-participants__presence {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--sx-borderRadiusSmall, 0.25rem);
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.wd-task-participants__presence--current {
    background: color-mix(in srgb, var(--wd-primary) 14%, transparent);
    color: var(--wd-primary);
}

.wd-task-participants__presence--past {
    background: var(--wd-hover-bg);
    color: var(--wd-muted-fg);
}

.wd-task-participants__roles,
.wd-task-participants__contribution {
    color: var(--wd-muted-fg);
    font-size: var(--sx-type-caption-font-size, 0.75rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wd-task-participants__chevron {
    flex: 0 0 auto;
    margin-top: 0.25rem;
    color: var(--wd-muted-fg);
}

.wd-task-participants__details {
    padding: 0 0.75rem 0.75rem 3.375rem;
    border-top: 1px solid var(--wd-border);
    padding-top: 0.625rem;
}

.wd-task-participants__breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.5rem;
}

.wd-task-participants__breakdown-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--sx-type-caption-font-size, 0.75rem);
}

.wd-task-participants__breakdown-row dt {
    color: var(--wd-fg);
}

.wd-task-participants__breakdown-row dd {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--wd-muted-fg);
}

.wd-task-participants__count {
    color: var(--wd-fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wd-task-participants__detail-empty {
    margin: 0 0 0.5rem;
    color: var(--wd-muted-fg);
    font-size: var(--sx-type-caption-font-size, 0.75rem);
}

.wd-task-participants__raw {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.6875rem;
    color: var(--wd-muted-fg);
}

/* The raw id is secondary information, so it takes the muted foreground explicitly rather
   than inheriting the global <code> accent — that accent is tuned for code samples in body
   copy and reads as a highlight here, pulling the eye away from the participant's name. */
.wd-task-participants__raw code {
    overflow-wrap: anywhere;
    color: var(--wd-muted-fg);
    background: none;
    font-family: var(--sx-font-family-monospace);
}

/* The panel lives in a resizable rail, so at narrow widths the presence chip
   drops under the name rather than squeezing the name into an ellipsis. */
@container (max-width: 15rem) {
    .wd-task-participants__name-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
    }

    .wd-task-participants__details {
        padding-left: 0.75rem;
    }
}

/* EG_PD-670: the way out for a task that has none left. Sits at the top of the task body next to
   the override history, so the reader who has just discovered the task cannot advance finds the
   remedy in the same place as the evidence. Collapsed to a single button until asked for — this is
   a fallback, not a routine control, and it should not read like one. */
.wd-task-force-status {
    margin: var(--sx-spacing-md, 1rem) var(--sx-spacing-md, 1rem) 0;
}

.wd-task-force-status__panel {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-sm, 0.5rem);
    padding: var(--sx-spacing-md, 1rem);
    border: 0.0625rem solid var(--wd-danger);
    border-inline-start-width: var(--sx-spacing-xs, 0.25rem);
    border-radius: var(--sx-borderRadiusLarge, 0.75rem);
    background: color-mix(in srgb, var(--wd-danger) 6%, transparent);
    color: var(--wd-fg);
}

.wd-task-force-status__header {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-sm, 0.5rem);
}

.wd-task-force-status__icon {
    color: var(--wd-danger);
    flex: 0 0 auto;
}

.wd-task-force-status__title {
    font-weight: var(--sx-fontWeightSemibold, 600);
    color: var(--wd-danger);
}

.wd-task-force-status__hint {
    font-size: var(--sx-font-size-small);
    color: var(--wd-muted-fg);
}

.wd-task-force-status__row {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs, 0.25rem);
}

.wd-task-force-status__reason {
    min-height: 4.5rem;
    resize: vertical;
}

.wd-task-force-status__preview,
.wd-task-force-status__result {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs, 0.125rem);
    padding: var(--sx-spacing-sm, 0.5rem);
    border: 0.0625rem solid var(--wd-border);
    border-radius: var(--sx-borderRadiusMedium, 0.375rem);
    background: var(--wd-card-bg);
    font-size: var(--sx-font-size-small);
}

.wd-task-force-status__preview-summary {
    font-weight: var(--sx-fontWeightSemibold, 600);
}

.wd-task-force-status__preview-bypassed {
    color: var(--wd-muted-fg);
}

.wd-task-force-status__preview-item {
    display: flex;
    gap: var(--sx-spacing-sm, 0.5rem);
    align-items: baseline;
}

.wd-task-force-status__ack {
    display: flex;
    gap: var(--sx-spacing-sm, 0.5rem);
    align-items: flex-start;
    margin-top: var(--sx-spacing-xs, 0.25rem);
    font-weight: var(--sx-fontWeightSemibold, 600);
    color: var(--wd-danger);
}

.wd-task-force-status__error {
    padding: var(--sx-spacing-sm, 0.5rem);
    border: 0.0625rem solid var(--wd-danger);
    border-radius: var(--sx-borderRadiusMedium, 0.375rem);
    color: var(--wd-danger);
    font-size: var(--sx-font-size-small);
}

.wd-task-force-status__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sx-spacing-sm, 0.5rem);
}

/* EG_PD-689: the panel could not find out whether it may be offered. Deliberately unlike both
   neighbours — not the danger-red override panel, because nothing is being overridden, and not
   nothing at all, because "we could not ask" is a different fact from "you may not". A neutral
   surface with a marked leading edge: visible, not alarming, and carrying one action — ask again. */
.wd-task-force-status__load-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-spacing-sm, 0.5rem);
    padding: var(--sx-spacing-md, 1rem);
    border: 0.0625rem solid var(--wd-border);
    border-inline-start-width: var(--sx-spacing-xs, 0.25rem);
    border-inline-start-color: var(--wd-muted-fg);
    border-radius: var(--sx-borderRadiusLarge, 0.75rem);
    background: var(--wd-surface-subtle);
    color: var(--wd-fg);
}

/* Not the override panel's danger red: this is a report that a question failed, not a warning that
   a rule is about to be stepped past. */
.wd-task-force-status__load-error .wd-task-force-status__icon {
    color: var(--wd-muted-fg);
}

.wd-task-force-status__load-error-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sx-spacing-xs, 0.25rem);
    min-width: 0;
}

.wd-task-force-status__load-error-detail {
    color: var(--wd-muted-fg);
    font-size: var(--sx-font-size-small);
    overflow-wrap: anywhere;
}

/* Which node defaults reach tasks that already exist, and which only reach new ones.
   One badge on every field rather than a mark on the odd one out: a badge that appears once
   says "this one is different" without saying what the rest are.

   Lives with the component rather than in the host's site.css: the Hub gates site.css on the
   path being under /admin/workdesk, so a component styled only there renders unstyled anywhere
   that gate does not hold. There is no --wd-warning token in any Workdesk theme, so the field
   that changes live work borrows the danger colour rather than inventing one. */
.wd-node-default-reach {
    display: inline-block;
    border-radius: var(--sx-borderRadiusPill, 999px);
    padding: var(--sx-spacing-xxs, 0.125rem) var(--sx-spacing-xs, 0.25rem);
    font-size: var(--sx-font-size-small);
    font-weight: var(--sx-fontWeightSemibold, 600);
    white-space: nowrap;
}

.wd-node-default-reach--new {
    color: var(--wd-muted-fg);
    background: var(--wd-surface-subtle);
}

.wd-node-default-reach--existing {
    color: var(--wd-danger);
    background: color-mix(in srgb, var(--wd-danger) 12%, transparent);
}