@echothink-ui/task 0.1.0

package/src/styles.css

@@ -0,0 +1,2889 @@
+@import "@echothink-ui/data/styles.css";
+
+/* Carbon-aligned styles for this package's custom components */
+
+.eth-task-card,
+.eth-task-detail-panel,
+.eth-task-wave-dag,
+.eth-task-wave-table,
+.eth-dag-legend,
+.eth-task-wave-header,
+.eth-task-timeline,
+.eth-task-progress,
+.eth-task-approval-panel,
+.eth-task-decision-panel,
+.eth-decision-required,
+.eth-task-status-badge,
+.eth-mobile-task-shell,
+.eth-task-thinking-chain,
+.eth-task-handoff-panel,
+.eth-task-run-log,
+.eth-task-dependencies {
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-family);
+}
+
+.eth-task-status-badge.eth-badge {
+  --eth-task-status-background: #e0e0e0;
+  --eth-task-status-border: transparent;
+  --eth-task-status-color: var(--eth-color-text-primary);
+  --eth-task-status-indicator: var(--eth-color-text-secondary);
+
+  align-items: center;
+  background-color: var(--eth-task-status-background);
+  border: 1px solid var(--eth-task-status-border);
+  color: var(--eth-task-status-color);
+  display: inline-flex;
+  font-weight: 500;
+  letter-spacing: 0;
+  min-block-size: 1.5rem;
+  padding-inline: var(--eth-space-sm);
+  vertical-align: middle;
+}
+
+.eth-task-status-badge.eth-badge .cds--tag__label {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-status-badge__indicator {
+  background: var(--eth-task-status-indicator);
+  block-size: 0.4375rem;
+  border: 1px solid color-mix(in srgb, var(--eth-task-status-indicator) 22%, #ffffff);
+  border-radius: 50%;
+  flex: 0 0 0.4375rem;
+  inline-size: 0.4375rem;
+}
+
+.eth-task-status-badge__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-task-status-badge--queued.eth-badge {
+  --eth-task-status-background: #dde1e6;
+  --eth-task-status-color: #343a3f;
+  --eth-task-status-indicator: var(--eth-color-text-secondary);
+}
+
+.eth-task-status-badge--running.eth-badge,
+.eth-task-status-badge--in-progress.eth-badge {
+  --eth-task-status-background: #d0e2ff;
+  --eth-task-status-color: #0043ce;
+  --eth-task-status-indicator: var(--eth-color-info);
+}
+
+.eth-task-status-badge--approval-required.eth-badge,
+.eth-task-status-badge--pending-approval.eth-badge,
+.eth-task-status-badge--warning.eth-badge {
+  --eth-task-status-background: #fcf4d6;
+  --eth-task-status-color: #684e00;
+  --eth-task-status-indicator: var(--eth-color-warning);
+  --eth-task-status-border: rgba(178, 134, 0, 0.2);
+}
+
+.eth-task-status-badge--blocked.eth-badge {
+  --eth-task-status-background: #fff1f1;
+  --eth-task-status-color: #a2191f;
+  --eth-task-status-indicator: #fa4d56;
+  --eth-task-status-border: rgba(218, 30, 40, 0.18);
+}
+
+.eth-task-status-badge--failed.eth-badge {
+  --eth-task-status-background: #ffd7d9;
+  --eth-task-status-color: #750e13;
+  --eth-task-status-indicator: var(--eth-color-danger);
+  --eth-task-status-border: rgba(218, 30, 40, 0.24);
+}
+
+.eth-task-status-badge--completed.eth-badge,
+.eth-task-status-badge--succeeded.eth-badge,
+.eth-task-status-badge--synced.eth-badge {
+  --eth-task-status-background: #defbe6;
+  --eth-task-status-color: #0e6027;
+  --eth-task-status-indicator: var(--eth-color-success);
+}
+
+.eth-task-card {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  box-shadow: none;
+  gap: var(--eth-space-md);
+  inline-size: min(100%, 40rem);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-task-card > .eth-surface__header {
+  align-items: flex-start;
+  gap: var(--eth-space-md);
+}
+
+.eth-task-card .eth-surface__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-card .eth-surface__heading h2 {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-card .eth-surface__subtitle,
+.eth-task-card .eth-surface__description {
+  margin: 0;
+}
+
+.eth-task-card .eth-surface__subtitle {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-card .eth-surface__description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  max-inline-size: 34rem;
+}
+
+.eth-task-card .eth-surface__header-actions {
+  align-items: flex-start;
+  flex: 0 0 auto;
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-card .eth-actions {
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-timeline {
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: min(100%, 44rem);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-task-card .eth-button {
+  --eth-button-padding-inline: var(--eth-space-md);
+
+  min-block-size: 2rem;
+}
+
+.eth-task-card .eth-meta-grid {
+  background: var(--eth-color-layer-02);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.eth-task-card .eth-meta-grid div {
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-task-card .eth-meta-grid div:last-child {
+  border-inline-end: 0;
+}
+
+.eth-task-card .eth-meta-grid dt {
+  margin-block-end: var(--eth-space-xs);
+}
+
+.eth-task-card .eth-meta-grid dd {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-xs);
+  min-block-size: 1.5rem;
+  min-inline-size: 0;
+}
+
+.eth-task-card__assignee {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: fit-content;
+  line-height: 1rem;
+  max-inline-size: 100%;
+  min-block-size: 1.5rem;
+  min-inline-size: 1.5rem;
+  overflow: hidden;
+  padding-inline: var(--eth-space-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-task-card--selectable {
+  cursor: pointer;
+}
+
+.eth-task-card--selectable:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-task-card--selectable:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-task-card__tags,
+.eth-task-wave-header__counts,
+.eth-task-wave-header__summary {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-card__tags {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-card__tags .cds--tag {
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+.eth-task-card__tags .cds--tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.eth-task-wave-header {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  box-shadow: none;
+  gap: var(--eth-space-lg);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-task-wave-header > .eth-surface__header {
+  align-items: flex-start;
+  gap: var(--eth-space-lg);
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header .eth-surface__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header .eth-surface__heading h2 {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-wave-header .eth-surface__subtitle,
+.eth-task-wave-header .eth-surface__description {
+  margin: 0;
+}
+
+.eth-task-wave-header .eth-surface__subtitle {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-wave-header .eth-surface__header-actions {
+  align-items: flex-start;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header .eth-actions {
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-wave-header .eth-button {
+  --eth-button-padding-inline: var(--eth-space-md);
+
+  block-size: 2rem;
+  inline-size: auto;
+  min-block-size: 2rem;
+  min-inline-size: max-content;
+}
+
+.eth-task-wave-header__summary {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header__summary span,
+.eth-task-wave-header__summary strong {
+  overflow-wrap: anywhere;
+}
+
+@media (width <= 42rem) {
+  .eth-task-card {
+    inline-size: 100%;
+  }
+
+  .eth-task-card > .eth-surface__header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-task-card .eth-surface__header-actions {
+    justify-content: flex-start;
+  }
+
+  .eth-task-card .eth-meta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-card .eth-meta-grid div {
+    border-block-end: 1px solid var(--eth-color-border-subtle);
+    border-inline-end: 0;
+  }
+
+  .eth-task-card .eth-meta-grid div:last-child {
+    border-block-end: 0;
+  }
+
+  .eth-task-wave-header {
+    padding: var(--eth-space-md);
+  }
+
+  .eth-task-wave-header > .eth-surface__header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-task-wave-header .eth-surface__header-actions {
+    justify-content: flex-start;
+  }
+
+  .eth-task-wave-header .eth-actions,
+  .eth-task-wave-header .eth-button {
+    inline-size: 100%;
+  }
+}
+
+.eth-task-wave-header__summary strong {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-task-wave-header .eth-task-progress {
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header .eth-task-progress__label {
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-wave-header .eth-task-progress__label strong,
+.eth-task-wave-header__summary strong,
+.eth-task-wave-header__count-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.eth-task-wave-header .eth-task-progress progress {
+  block-size: var(--eth-space-xs);
+}
+
+.eth-task-wave-header__counts {
+  min-inline-size: 0;
+}
+
+.eth-task-wave-header__count.cds--tag {
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+.eth-task-wave-header__count.cds--tag .cds--tag__label {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--eth-space-2xs);
+}
+
+.eth-task-wave-header__count-value {
+  font-weight: 600;
+}
+
+.eth-task-wave-header__count--queued.cds--tag {
+  background-color: #e0e0e0;
+  color: #393939;
+}
+
+.eth-task-wave-header__count--approval-required.cds--tag,
+.eth-task-wave-header__count--pending-approval.cds--tag {
+  background-color: #fcf4d6;
+  color: #684e00;
+}
+
+.eth-task-wave-dag {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  gap: var(--eth-space-md);
+}
+
+.eth-task-wave-dag > .eth-surface__header {
+  gap: var(--eth-space-md);
+}
+
+.eth-task-wave-dag .eth-surface__heading h2 {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+}
+
+.eth-task-wave-dag .eth-surface__description {
+  max-inline-size: 42rem;
+}
+
+.eth-task-wave-dag__viewport {
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.eth-task-wave-dag .eth-dag {
+  background: transparent;
+  border-radius: 0;
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 42rem;
+}
+
+.eth-dag__canvas {
+  fill: var(--eth-color-layer-02);
+}
+
+.eth-task-wave-dag__fallback {
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.eth-dag-node {
+  pointer-events: visiblePainted;
+}
+
+.eth-dag-node--interactive {
+  cursor: pointer;
+}
+
+.eth-dag-node__body {
+  fill: var(--eth-color-layer-01);
+  rx: 0;
+  stroke: var(--eth-color-border-subtle);
+  stroke-width: 1.25px;
+  transition:
+    fill 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    stroke 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-dag-node--interactive:hover .eth-dag-node__body,
+.eth-dag-node:focus-visible .eth-dag-node__body {
+  fill: var(--eth-color-layer-hover);
+  stroke: var(--eth-color-border-strong);
+}
+
+.eth-dag-node__selection {
+  fill: none;
+  opacity: 0;
+  pointer-events: none;
+  stroke: var(--eth-color-focus);
+  stroke-width: 2px;
+  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-dag-node--selected .eth-dag-node__selection,
+.eth-dag-node:focus-visible .eth-dag-node__selection {
+  opacity: 1;
+}
+
+.eth-dag-node__status-strip {
+  pointer-events: none;
+}
+
+.eth-dag-node__status-dot {
+  pointer-events: none;
+  stroke: var(--eth-color-layer-01);
+  stroke-width: 2px;
+}
+
+.eth-dag-node__port {
+  fill: var(--eth-color-layer-01);
+  pointer-events: none;
+  stroke: var(--eth-color-border-strong);
+  stroke-width: 1px;
+}
+
+.eth-dag-node:focus-visible {
+  outline: none;
+}
+
+.eth-dag-node__label {
+  fill: var(--eth-color-text-primary);
+  font-size: calc(0.8125rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+}
+
+.eth-dag-node__status {
+  fill: var(--eth-color-text-secondary);
+  font-size: calc(0.6875rem * var(--eth-text-scale, 1));
+  text-transform: none;
+}
+
+.eth-dag-edge path[data-eth-component="DAGEdge"] {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: var(--eth-color-border-strong);
+  transition: stroke 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-dag-edge marker path {
+  fill: var(--eth-color-border-strong);
+}
+
+.eth-dag-edge text {
+  fill: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  paint-order: stroke;
+  stroke: var(--eth-color-layer-01);
+  stroke-width: 3px;
+}
+
+.eth-dag-edge__label rect {
+  fill: var(--eth-color-layer-01);
+  stroke: var(--eth-color-border-subtle);
+}
+
+.eth-dag-edge__label text {
+  fill: var(--eth-color-text-primary);
+  font-size: calc(0.6875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  paint-order: normal;
+  stroke: none;
+  stroke-width: 0;
+}
+
+.eth-dag-edge--completed path[data-eth-component="DAGEdge"],
+.eth-dag-edge--succeeded path[data-eth-component="DAGEdge"],
+.eth-dag-edge--synced path[data-eth-component="DAGEdge"],
+.eth-dag-edge--active path[data-eth-component="DAGEdge"] {
+  stroke: var(--eth-color-success);
+}
+
+.eth-dag-edge--completed marker path,
+.eth-dag-edge--succeeded marker path,
+.eth-dag-edge--synced marker path,
+.eth-dag-edge--active marker path {
+  fill: var(--eth-color-success);
+}
+
+.eth-dag-edge--running path[data-eth-component="DAGEdge"],
+.eth-dag-edge--in-progress path[data-eth-component="DAGEdge"],
+.eth-dag-edge--queued path[data-eth-component="DAGEdge"] {
+  stroke: var(--eth-color-info);
+}
+
+.eth-dag-edge--running path[data-eth-component="DAGEdge"],
+.eth-dag-edge--in-progress path[data-eth-component="DAGEdge"],
+.eth-dag-edge--queued path[data-eth-component="DAGEdge"],
+.eth-dag-edge--pending-approval path[data-eth-component="DAGEdge"],
+.eth-dag-edge--warning path[data-eth-component="DAGEdge"] {
+  stroke-dasharray: 7 5;
+}
+
+.eth-dag-edge--running marker path,
+.eth-dag-edge--in-progress marker path,
+.eth-dag-edge--queued marker path {
+  fill: var(--eth-color-info);
+}
+
+.eth-dag-edge--blocked path[data-eth-component="DAGEdge"],
+.eth-dag-edge--failed path[data-eth-component="DAGEdge"],
+.eth-dag-edge--approval-required path[data-eth-component="DAGEdge"] {
+  stroke: var(--eth-color-danger);
+}
+
+.eth-dag-edge--blocked path[data-eth-component="DAGEdge"],
+.eth-dag-edge--failed path[data-eth-component="DAGEdge"],
+.eth-dag-edge--approval-required path[data-eth-component="DAGEdge"] {
+  stroke-dasharray: 3 5;
+}
+
+.eth-dag-edge--blocked marker path,
+.eth-dag-edge--failed marker path,
+.eth-dag-edge--approval-required marker path {
+  fill: var(--eth-color-danger);
+}
+
+.eth-dag-edge--pending-approval path[data-eth-component="DAGEdge"],
+.eth-dag-edge--warning path[data-eth-component="DAGEdge"] {
+  stroke: var(--eth-color-warning);
+}
+
+.eth-dag-edge--pending-approval marker path,
+.eth-dag-edge--warning marker path {
+  fill: var(--eth-color-warning);
+}
+
+.eth-dag-legend {
+  align-items: flex-start;
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-md) var(--eth-space-xl);
+  inline-size: 100%;
+  padding-block-start: var(--eth-space-sm);
+}
+
+.eth-dag-legend__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm) var(--eth-space-md);
+  min-inline-size: 0;
+}
+
+.eth-dag-legend__heading,
+.eth-dag-legend__item {
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+}
+
+.eth-dag-legend__heading {
+  color: var(--eth-color-text-helper);
+  flex: 0 0 auto;
+  font-weight: 600;
+}
+
+.eth-dag-legend__list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm) var(--eth-space-md);
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-dag-legend__item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--eth-space-xs);
+  min-block-size: var(--eth-space-lg);
+  white-space: nowrap;
+}
+
+.eth-dag-legend__label {
+  display: inline-block;
+  max-inline-size: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.eth-dag-legend__swatch {
+  --eth-dag-legend-color: var(--eth-color-border-strong);
+
+  background: var(--eth-dag-legend-color);
+  block-size: 0.625rem;
+  border: 1px solid var(--eth-dag-legend-color);
+  border-radius: 50%;
+  flex: 0 0 auto;
+  inline-size: 0.625rem;
+}
+
+.eth-dag-legend__swatch--queued,
+.eth-dag-legend__swatch--pending-approval,
+.eth-dag-legend__swatch--warning {
+  background: transparent;
+}
+
+.eth-dag-legend__swatch--pending-approval,
+.eth-dag-legend__swatch--warning {
+  border-color: var(--eth-color-border-strong);
+}
+
+@media (width <= 42rem) {
+  .eth-task-wave-dag > .eth-surface__header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-task-wave-dag .eth-dag {
+    min-inline-size: 40rem;
+  }
+}
+
+.eth-dag-legend__edge {
+  --eth-dag-legend-color: var(--eth-color-border-strong);
+
+  align-items: center;
+  block-size: var(--eth-space-lg);
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: var(--eth-space-2xl);
+  position: relative;
+}
+
+.eth-dag-legend__edge::before {
+  border-block-start: 2px solid var(--eth-dag-legend-color);
+  content: "";
+  inline-size: 100%;
+}
+
+.eth-dag-legend__edge::after {
+  border-block: 0.25rem solid transparent;
+  border-inline-start: 0.375rem solid var(--eth-dag-legend-color);
+  content: "";
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.eth-dag-legend__edge--critical::before {
+  border-block-start-width: 3px;
+}
+
+.eth-dag-legend__edge--conditional::before {
+  border-block-start-style: dashed;
+}
+
+.eth-task-timeline__list {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-task-timeline__event {
+  --eth-task-timeline-accent: var(--eth-color-interactive-primary);
+
+  display: grid;
+  gap: 0 var(--eth-space-md);
+  grid-template-columns: minmax(7.5rem, max-content) 1rem minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.eth-task-timeline__event--comment {
+  --eth-task-timeline-accent: var(--eth-color-border-strong);
+}
+
+.eth-task-timeline__event--assignment {
+  --eth-task-timeline-accent: var(--eth-color-info);
+}
+
+.eth-task-timeline__event--attachment {
+  --eth-task-timeline-accent: var(--eth-color-success);
+}
+
+.eth-task-timeline__event--system {
+  --eth-task-timeline-accent: var(--eth-color-text-secondary);
+}
+
+.eth-task-timeline__time {
+  color: var(--eth-color-text-secondary);
+  font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  justify-self: end;
+  line-height: 1.3333;
+  padding-block-start: var(--eth-space-2xs);
+  white-space: nowrap;
+}
+
+.eth-task-timeline__rail {
+  display: flex;
+  justify-content: center;
+  min-block-size: 100%;
+  position: relative;
+}
+
+.eth-task-timeline__rail::after {
+  background: var(--eth-color-border-subtle);
+  block-size: calc(100% - var(--eth-space-xs));
+  content: "";
+  inline-size: 1px;
+  inset-block-start: 0.875rem;
+  inset-inline-start: calc(50% - 0.5px);
+  position: absolute;
+}
+
+.eth-task-timeline__event:last-child .eth-task-timeline__rail::after {
+  display: none;
+}
+
+.eth-task-timeline__marker {
+  background: var(--eth-task-timeline-accent);
+  block-size: 0.625rem;
+  border: 2px solid var(--eth-color-layer-01);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px var(--eth-task-timeline-accent);
+  inline-size: 0.625rem;
+  margin-block-start: var(--eth-space-xs);
+  position: relative;
+  z-index: 1;
+}
+
+.eth-task-timeline__body {
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+  padding-block-end: var(--eth-space-lg);
+}
+
+.eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__time,
+.eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__rail,
+.eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__body {
+  padding-block-start: var(--eth-space-lg);
+}
+
+.eth-task-timeline__event:last-child .eth-task-timeline__body {
+  border-block-end: 0;
+  padding-block-end: 0;
+}
+
+.eth-task-timeline__event-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-task-timeline__actor {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-timeline__summary {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-timeline__details {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-progress {
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-progress__label {
+  align-items: center;
+  color: var(--eth-color-text-secondary);
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+}
+
+.eth-task-progress__label strong {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-task-progress progress {
+  block-size: var(--eth-space-sm);
+  border: 0;
+  inline-size: 100%;
+}
+
+.eth-task-progress progress::-webkit-progress-bar {
+  background: var(--eth-color-layer-02);
+}
+
+.eth-task-progress progress::-webkit-progress-value {
+  background: var(--eth-color-interactive-primary);
+}
+
+.eth-task-progress progress::-moz-progress-bar {
+  background: var(--eth-color-interactive-primary);
+}
+
+.eth-task-progress__steps {
+  align-items: stretch;
+  display: flex;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0 0 var(--eth-space-xs);
+}
+
+.eth-task-progress__step {
+  color: var(--eth-color-text-secondary);
+  display: grid;
+  flex: 1 0 9.5rem;
+  gap: var(--eth-space-sm);
+  grid-template-rows: auto 1fr;
+  min-inline-size: 9.5rem;
+  padding-inline-end: var(--eth-space-sm);
+}
+
+.eth-task-progress__step-track {
+  align-items: center;
+  display: grid;
+  gap: var(--eth-space-sm);
+  grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
+  min-block-size: var(--eth-space-lg);
+}
+
+.eth-task-progress__circle {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border: 1px solid
+    var(--eth-color-border-strong);
+  border-radius: 50%;
+  block-size: var(--eth-space-lg);
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: var(--eth-space-lg);
+  justify-content: center;
+}
+
+.eth-task-progress__connector {
+  background: var(--eth-color-border-subtle);
+  block-size: 1px;
+  display: block;
+  inline-size: 100%;
+}
+
+.eth-task-progress__step-copy {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-task-progress__step-label {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.125rem;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-task-progress__step--completed .eth-task-progress__circle,
+.eth-task-progress__step--succeeded .eth-task-progress__circle,
+.eth-task-progress__step--synced .eth-task-progress__circle {
+  background: var(--eth-color-success);
+  border-color: var(--eth-color-success);
+}
+
+.eth-task-progress__step--completed .eth-task-progress__circle::after,
+.eth-task-progress__step--succeeded .eth-task-progress__circle::after,
+.eth-task-progress__step--synced .eth-task-progress__circle::after {
+  block-size: 0.5rem;
+  border-block-end: 1.5px solid var(--eth-color-layer-01);
+  border-inline-end: 1.5px solid var(--eth-color-layer-01);
+  content: "";
+  inline-size: 0.25rem;
+  transform: rotate(45deg) translate(-0.0625rem, -0.0625rem);
+}
+
+.eth-task-progress__step--completed .eth-task-progress__connector,
+.eth-task-progress__step--succeeded .eth-task-progress__connector,
+.eth-task-progress__step--synced .eth-task-progress__connector {
+  background: var(--eth-color-success);
+}
+
+.eth-task-progress__step--running .eth-task-progress__circle,
+.eth-task-progress__step--in-progress .eth-task-progress__circle,
+.eth-task-progress__step--active .eth-task-progress__circle,
+.eth-task-progress__step--queued .eth-task-progress__circle {
+  background: var(--eth-color-info);
+  border-color: var(--eth-color-info);
+}
+
+.eth-task-progress__step--blocked .eth-task-progress__circle,
+.eth-task-progress__step--failed .eth-task-progress__circle,
+.eth-task-progress__step--approval-required .eth-task-progress__circle {
+  background: var(--eth-color-danger);
+  border-color: var(--eth-color-danger);
+}
+
+.eth-task-progress__step--pending-approval .eth-task-progress__circle,
+.eth-task-progress__step--warning .eth-task-progress__circle {
+  background: var(--eth-color-warning);
+  border-color: var(--eth-color-warning);
+}
+
+.eth-task-progress__step--not-started .eth-task-progress__step-label,
+.eth-task-progress__step--inactive .eth-task-progress__step-label {
+  color: var(--eth-color-text-secondary);
+  font-weight: 400;
+}
+
+.eth-task-progress__step-status {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-mobile-task-shell {
+  background: var(--eth-color-background);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
+}
+
+.eth-mobile-task-shell__header {
+  background: var(--eth-color-layer-01);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  padding: calc(var(--eth-space-lg) + env(safe-area-inset-top)) var(--eth-space-lg) var(--eth-space-lg);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.eth-mobile-task-shell__title-block {
+  display: grid;
+  gap: var(--eth-space-xs);
+}
+
+.eth-mobile-task-shell__title {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  line-height: 1.2;
+  margin: 0;
+}
+
+.eth-mobile-task-shell__subtitle,
+.eth-mobile-task-shell__identity {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-mobile-task-shell__subtitle {
+  margin: 0;
+}
+
+.eth-mobile-task-shell__progress,
+.eth-mobile-task-shell__footer-main {
+  min-inline-size: 0;
+}
+
+.eth-mobile-task-shell__main {
+  display: grid;
+  gap: var(--eth-space-lg);
+  overflow: auto;
+  padding: var(--eth-space-lg);
+}
+
+.eth-mobile-task-shell__footer {
+  background: var(--eth-color-layer-01);
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  bottom: 0;
+  display: grid;
+  gap: var(--eth-space-md);
+  padding: var(--eth-space-md) var(--eth-space-lg) calc(var(--eth-space-md) + env(safe-area-inset-bottom));
+  position: sticky;
+  z-index: 2;
+}
+
+.eth-mobile-task-shell__identity {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-decision-panel {
+  inline-size: min(100%, 72rem);
+}
+
+.eth-decision-required {
+  border-inline-start: 4px solid var(--eth-color-warning);
+}
+
+.eth-decision-required--low {
+  border-inline-start-color: var(--eth-color-info);
+}
+
+.eth-decision-required--medium {
+  border-inline-start-color: var(--eth-color-warning);
+}
+
+.eth-decision-required--high,
+.eth-decision-required--critical {
+  border-inline-start-color: var(--eth-color-danger);
+}
+
+.eth-task-decision-panel--low {
+  box-shadow: inset 4px 0 0 var(--eth-color-info);
+}
+
+.eth-task-decision-panel--medium {
+  box-shadow: inset 4px 0 0 var(--eth-color-warning);
+}
+
+.eth-task-decision-panel--high,
+.eth-task-decision-panel--critical {
+  box-shadow: inset 4px 0 0 var(--eth-color-danger);
+}
+
+.eth-task-decision-panel .cds--inline-notification {
+  margin: 0;
+  max-inline-size: none;
+}
+
+.eth-task-decision-panel__summary,
+.eth-task-approval-panel__body {
+  display: grid;
+  gap: var(--eth-space-md);
+}
+
+.eth-task-decision-panel__summary {
+  background: var(--eth-color-layer-02);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  padding: var(--eth-space-lg);
+}
+
+.eth-task-decision-panel__section-label,
+.eth-task-decision-panel__section-header span,
+.eth-task-decision-panel__option-state {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.333;
+  text-transform: uppercase;
+}
+
+.eth-task-decision-panel__summary-body {
+  color: var(--eth-color-text-primary);
+  line-height: 1.5;
+}
+
+.eth-task-decision-panel__summary-body > :first-child {
+  margin-block-start: 0;
+}
+
+.eth-task-decision-panel__summary-body > :last-child {
+  margin-block-end: 0;
+}
+
+.eth-task-decision-panel__evidence {
+  border-block-start: 1px solid
+    var(--eth-color-border-subtle);
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-decision-panel__section-header {
+  align-items: baseline;
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+}
+
+.eth-task-decision-panel__section-header h3 {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  margin: 0;
+}
+
+.eth-task-decision-panel__evidence ul {
+  display: grid;
+  gap: var(--eth-space-sm);
+  list-style: none;
+  margin: var(--eth-space-md) 0 0;
+  padding: 0;
+}
+
+.eth-task-decision-panel__evidence li {
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-xs);
+  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
+  padding: var(--eth-space-md);
+}
+
+.eth-task-decision-panel__evidence-label {
+  min-inline-size: 0;
+}
+
+.eth-task-decision-panel__evidence-link {
+  color: var(--eth-color-link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.eth-task-decision-panel__evidence-link:hover {
+  text-decoration: underline;
+}
+
+.eth-task-decision-panel__evidence-link:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: 2px;
+}
+
+.eth-task-decision-panel__evidence-preview {
+  color: var(--eth-color-text-secondary);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-decision-panel__options {
+  border-block-start: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-sm);
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-decision-panel__option {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  border-inline-start: 4px solid
+    var(--eth-color-border-strong);
+  color: var(--eth-color-text-primary);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  inline-size: 100%;
+  min-block-size: 4rem;
+  padding: var(--eth-space-md);
+  text-align: start;
+  transition:
+    background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    outline-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-task-decision-panel__option:hover:not(:disabled) {
+  background: var(--eth-color-layer-hover);
+  border-color: var(--eth-color-border-strong);
+}
+
+.eth-task-decision-panel__option:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-task-decision-panel__option:disabled {
+  color: var(--eth-color-text-secondary);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.eth-task-decision-panel__option:disabled .eth-task-decision-panel__option-state {
+  color: currentcolor;
+}
+
+.eth-task-decision-panel__option[aria-pressed="true"] {
+  background: var(--eth-color-layer-selected);
+  border-color: var(--eth-color-border-strong);
+}
+
+.eth-task-decision-panel__option--primary {
+  border-inline-start-color: var(--eth-color-focus);
+}
+
+.eth-task-decision-panel__option--success {
+  border-inline-start-color: var(--eth-color-success);
+}
+
+.eth-task-decision-panel__option--danger {
+  border-inline-start-color: var(--eth-color-danger);
+}
+
+.eth-task-decision-panel__option--secondary,
+.eth-task-decision-panel__option--tertiary,
+.eth-task-decision-panel__option--ghost {
+  border-inline-start-color: var(--eth-color-focus);
+}
+
+.eth-task-decision-panel__option-main {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-decision-panel__option-label {
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-task-decision-panel__option-description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-decision-panel__option-state {
+  color: var(--eth-color-link);
+  white-space: nowrap;
+}
+
+.eth-task-decision-panel__decision {
+  color: var(--eth-color-text-secondary);
+}
+
+@media (max-width: 42rem) {
+  .eth-task-decision-panel__evidence li,
+  .eth-task-decision-panel__option {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-decision-panel__option-state {
+    justify-self: start;
+  }
+}
+
+.eth-task-table-shell,
+.eth-task-wave-table {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-task-table-shell {
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-family);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-task-table-shell__header {
+  align-items: start;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.eth-task-table-shell__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-table-shell__header h2,
+.eth-task-table-shell__header p {
+  margin: 0;
+}
+
+.eth-task-table-shell__header h2 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.eth-task-table-shell__header p {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  max-inline-size: 44rem;
+}
+
+.eth-task-table-shell__toolbar {
+  align-items: end;
+  background: var(--eth-color-layer-02);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  min-block-size: 3rem;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-task-table-shell__filters {
+  align-items: end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+}
+
+.eth-task-table-shell__filter {
+  inline-size: min(100%, 14rem);
+}
+
+.eth-task-table-shell__summary {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  white-space: nowrap;
+}
+
+.eth-task-table {
+  min-inline-size: 65rem;
+  table-layout: fixed;
+}
+
+.eth-task-table__task {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-task-table__task-title,
+.eth-task-table__task-description,
+.eth-task-table__date {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-task-table__task-title {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-task-table__task-description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.333;
+}
+
+.eth-task-table__priority {
+  max-inline-size: 100%;
+}
+
+.eth-task-table__empty-value {
+  color: var(--eth-color-text-secondary);
+}
+
+@media (width <= 42rem) {
+  .eth-task-table-shell__header {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-table-shell__toolbar,
+  .eth-task-table-shell__filters {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-task-table-shell__summary {
+    white-space: normal;
+  }
+}
+
+.eth-task-wave-table {
+  inline-size: 100%;
+}
+
+.eth-task-wave-table .eth-surface__heading h2 {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  line-height: 1.75rem;
+}
+
+.eth-task-wave-table .eth-surface__subtitle {
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-wave-table .eth-data-table-wrap {
+  border-color: var(--eth-color-border-subtle);
+  box-shadow: none;
+}
+
+.eth-task-wave-table__table {
+  min-inline-size: 60rem;
+  table-layout: fixed;
+}
+
+.eth-task-wave-table__table th {
+  background: var(--eth-color-layer-02);
+  color: var(--eth-color-text-secondary);
+  white-space: nowrap;
+}
+
+.eth-task-wave-table__table th:nth-child(1),
+.eth-task-wave-table__table td:nth-child(1) {
+  inline-size: 4.5rem;
+}
+
+.eth-task-wave-table__table th:nth-child(2),
+.eth-task-wave-table__table td:nth-child(2) {
+  inline-size: 22rem;
+}
+
+.eth-task-wave-table__table th:nth-child(3),
+.eth-task-wave-table__table td:nth-child(3) {
+  inline-size: 12rem;
+}
+
+.eth-task-wave-table__table th:nth-child(4),
+.eth-task-wave-table__table td:nth-child(4) {
+  inline-size: 8rem;
+}
+
+.eth-task-wave-table__table th:nth-child(5),
+.eth-task-wave-table__table td:nth-child(5),
+.eth-task-wave-table__table th:nth-child(6),
+.eth-task-wave-table__table td:nth-child(6) {
+  inline-size: 7rem;
+}
+
+.eth-task-wave-table__order,
+.eth-task-wave-table__duration {
+  color: var(--eth-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.eth-task-wave-table__task-title,
+.eth-task-wave-table__assignee,
+.eth-task-wave-table__duration {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-task-wave-table__task-title {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-task-wave-table__task-button {
+  max-inline-size: 100%;
+}
+
+.eth-task-wave-table__task-button .eth-task-wave-table__task-title {
+  color: inherit;
+}
+
+.eth-task-wave-table__status {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 1rem;
+  min-block-size: 1.5rem;
+  padding: 0 var(--eth-space-sm) 0 var(--eth-space-xs);
+}
+
+.eth-task-wave-table__status .eth-status-dot__label {
+  max-inline-size: 9rem;
+}
+
+.eth-task-wave-table__dependency-count {
+  justify-content: center;
+  min-inline-size: 2rem;
+}
+
+.eth-task-wave-table__empty {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-task-dependencies,
+.eth-task-dependencies__group {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-task-detail-panel__stack {
+  display: grid;
+  gap: 0;
+}
+
+.eth-task-detail-panel__section {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  padding-block: var(--eth-space-lg);
+}
+
+.eth-task-detail-panel__section summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: var(--eth-space-sm);
+  font-weight: 600;
+  inline-size: fit-content;
+  list-style: none;
+  min-block-size: var(--eth-space-xl);
+  min-inline-size: min(100%, 12rem);
+  outline-offset: 2px;
+}
+
+.eth-task-detail-panel__section summary::-webkit-details-marker {
+  display: none;
+}
+
+.eth-task-detail-panel__section summary::marker {
+  content: "";
+}
+
+.eth-task-detail-panel__section summary::before {
+  border-block: 0.25rem solid transparent;
+  border-inline-start: 0.3125rem solid
+    var(--eth-color-text-secondary);
+  content: "";
+  flex: 0 0 auto;
+  transform-origin: 35% 50%;
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-task-detail-panel__section[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.eth-task-detail-panel__section summary:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+}
+
+.eth-task-detail-panel__summary-label {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-task-detail-panel__summary-meta {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.333;
+}
+
+.eth-task-detail-panel__section-body {
+  margin-block-start: var(--eth-space-md);
+}
+
+.eth-task-detail-panel__metadata {
+  background: var(--eth-color-layer-01);
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  max-inline-size: 72rem;
+}
+
+.eth-task-detail-panel__description {
+  color: var(--eth-color-text-secondary);
+  line-height: 1.5;
+  max-inline-size: 56rem;
+}
+
+.eth-task-detail-panel__actions .eth-actions {
+  align-items: center;
+}
+
+.eth-task-detail-panel__actions .eth-button {
+  min-inline-size: 7rem;
+}
+
+.eth-task-dependencies {
+  gap: var(--eth-space-xl);
+}
+
+.eth-task-dependencies__group {
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-dependencies__group-header {
+  align-items: flex-end;
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  min-inline-size: 0;
+  padding-block-end: var(--eth-space-sm);
+}
+
+.eth-task-dependencies__group-heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-dependencies__group h4,
+.eth-task-dependencies__group p {
+  margin: 0;
+}
+
+.eth-task-dependencies__group h4 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.125rem;
+}
+
+.eth-task-dependencies__group p {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-dependencies__list {
+  background: var(--eth-color-border-subtle);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: 1px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-task-dependencies__item {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border-inline-start: 3px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-block-size: 4rem;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-task-dependencies__item--approval-required,
+.eth-task-dependencies__item--blocked,
+.eth-task-dependencies__item--failed {
+  border-inline-start-color: var(--eth-color-danger);
+}
+
+.eth-task-dependencies__item--pending-approval,
+.eth-task-dependencies__item--stale,
+.eth-task-dependencies__item--warning {
+  border-inline-start-color: var(--eth-color-warning);
+}
+
+.eth-task-dependencies__item--in-progress,
+.eth-task-dependencies__item--queued,
+.eth-task-dependencies__item--running {
+  border-inline-start-color: var(--eth-color-info);
+}
+
+.eth-task-dependencies__item--active,
+.eth-task-dependencies__item--completed,
+.eth-task-dependencies__item--succeeded,
+.eth-task-dependencies__item--synced {
+  border-inline-start-color: var(--eth-color-success);
+}
+
+.eth-task-dependencies__item-main {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-dependencies__relationship {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1rem;
+}
+
+.eth-task-dependencies__title {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.125rem;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-dependencies__id {
+  color: var(--eth-color-text-secondary);
+  font-family: var(--eth-font-mono, monospace);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-dependencies__item .eth-task-status-badge {
+  justify-self: end;
+  max-inline-size: 100%;
+}
+
+.eth-task-approval-panel,
+.eth-task-human-intervention-panel,
+.eth-task-blocking-reason-panel,
+.eth-task-handoff-panel,
+.eth-task-run-log,
+.eth-task-retry-panel,
+.eth-task-thinking-chain {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-task-retry-panel {
+  inline-size: min(100%, 64rem);
+}
+
+.eth-task-retry-panel .eth-inline-notification.cds--inline-notification {
+  max-inline-size: none;
+}
+
+.eth-task-run-log {
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.eth-task-run-log > .eth-surface__header {
+  align-items: flex-start;
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  padding: var(--eth-space-lg);
+}
+
+.eth-task-run-log > .eth-surface__header h2 {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.eth-task-approval-panel__summary {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  max-inline-size: 48rem;
+}
+
+.eth-task-approval-panel__state.cds--inline-notification,
+.eth-task-approval-panel__state.eth-inline-notification {
+  inline-size: 100%;
+}
+
+.eth-task-approval-panel__reason .cds--text-area {
+  min-block-size: 6rem;
+  resize: vertical;
+}
+
+.eth-task-human-intervention-panel {
+  gap: var(--eth-space-md);
+}
+
+.eth-task-human-intervention-panel .eth-surface__header {
+  align-items: center;
+}
+
+.eth-task-human-intervention-panel .eth-inline-notification {
+  max-inline-size: min(100%, 52rem);
+}
+
+.eth-task-human-intervention-panel__details {
+  background: var(--eth-color-border-subtle);
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: 1px;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  margin: 0;
+}
+
+.eth-task-human-intervention-panel__details div {
+  background: var(--eth-color-layer-01);
+  min-inline-size: 0;
+  padding: var(--eth-space-md);
+}
+
+.eth-task-human-intervention-panel__details dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  margin: 0 0 var(--eth-space-xs);
+}
+
+.eth-task-human-intervention-panel__details dd {
+  align-items: center;
+  color: var(--eth-color-text-primary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-task-human-intervention-panel__task-title {
+  font-weight: 600;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-human-intervention-panel__task-id {
+  color: var(--eth-color-text-secondary);
+  font-family: var(--eth-font-mono, monospace);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+}
+
+.eth-task-human-intervention-panel__actions {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  justify-content: flex-start;
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-approval-panel__audit,
+.eth-task-retry-panel__policy {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  margin: 0;
+}
+
+.eth-task-approval-panel__audit {
+  background: var(--eth-color-border-subtle);
+  gap: 1px;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.eth-task-approval-panel__audit div,
+.eth-task-retry-panel__policy div {
+  border-inline-end: 1px solid var(--eth-color-border-subtle);
+  padding: var(--eth-space-md);
+}
+
+.eth-task-approval-panel__audit div {
+  background: var(--eth-color-layer-01);
+  border-inline-end: 0;
+}
+
+.eth-task-approval-panel__audit dt,
+.eth-task-retry-panel__policy dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  margin: 0 0 var(--eth-space-xs);
+}
+
+.eth-task-approval-panel__audit dd,
+.eth-task-retry-panel__policy dd {
+  margin: 0;
+}
+
+.eth-task-approval-panel__audit dd {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-approval-panel__footer {
+  display: grid;
+  gap: var(--eth-space-md);
+}
+
+.eth-task-approval-panel__actions {
+  align-items: center;
+  border-block-start: 1px solid
+    var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-approval-panel__actions .eth-button {
+  min-inline-size: 8.5rem;
+}
+
+.eth-task-approval-panel__custom-footer {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+}
+
+@media (max-width: 42rem) {
+  .eth-task-approval-panel__actions .eth-button {
+    inline-size: 100%;
+  }
+}
+
+.eth-task-retry-panel__policy {
+  background: var(--eth-color-border-subtle);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  gap: 1px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  overflow: hidden;
+}
+
+.eth-task-retry-panel__policy div {
+  background: var(--eth-color-layer-01);
+  border-inline-end: 0;
+  min-block-size: 4.75rem;
+  min-inline-size: 0;
+}
+
+.eth-task-retry-panel__policy dt {
+  line-height: 1.333;
+}
+
+.eth-task-retry-panel__policy dd {
+  color: var(--eth-color-text-primary);
+  display: grid;
+  font-size: calc(0.9375rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  gap: var(--eth-space-xs);
+  line-height: 1.333;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-retry-panel__attempts--exhausted dd {
+  color: var(--eth-color-danger);
+}
+
+.eth-task-retry-panel__policy-note {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.333;
+}
+
+.eth-task-retry-panel__controls {
+  border-block-start: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  padding-block-start: var(--eth-space-lg);
+}
+
+.eth-task-retry-panel__reason-field {
+  inline-size: min(100%, 40rem);
+}
+
+.eth-task-retry-panel__reason-field .cds--text-area__wrapper,
+.eth-task-retry-panel__reason-field .cds--text-area {
+  inline-size: 100%;
+}
+
+.eth-task-retry-panel__reason-field .cds--text-area {
+  min-block-size: 6rem;
+  resize: vertical;
+}
+
+.eth-task-retry-panel__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-md);
+}
+
+.eth-task-retry-panel__actions p {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  margin: 0;
+  max-inline-size: 28rem;
+}
+
+.eth-task-blocking-reason-panel__list {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-task-blocking-reason-panel__item {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-block-size: 4rem;
+  padding: var(--eth-space-lg);
+}
+
+.eth-task-blocking-reason-panel__item:last-child {
+  border-block-end: 0;
+}
+
+.eth-task-blocking-reason-panel__content {
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-task-blocking-reason-panel__reason {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-blocking-reason-panel__meta {
+  align-items: center;
+  color: var(--eth-color-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  gap: var(--eth-space-sm);
+  line-height: 1.3333;
+}
+
+.eth-task-blocking-reason-panel__actions {
+  justify-self: end;
+}
+
+.eth-task-blocking-reason-panel__actions .eth-actions {
+  justify-content: flex-end;
+}
+
+.eth-task-handoff-panel__body {
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: min(100%, 48rem);
+}
+
+.eth-task-handoff-panel__target-field {
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-task-handoff-panel__target-heading {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  margin: 0;
+}
+
+.eth-task-handoff-panel__list {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+}
+
+.eth-task-handoff-panel__option {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border: 0;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-block-size: 4rem;
+  padding: var(--eth-space-md);
+  text-align: start;
+  touch-action: manipulation;
+  transition:
+    background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-task-handoff-panel__option:last-child {
+  border-block-end: 0;
+}
+
+.eth-task-handoff-panel__option:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-task-handoff-panel__option:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-task-handoff-panel__option--selected {
+  background: var(--eth-color-layer-selected);
+  border-inline-start: 4px solid var(--eth-color-interactive-primary);
+  padding-inline-start: calc(var(--eth-space-md) - 4px);
+}
+
+.eth-task-handoff-panel__option-copy {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-task-handoff-panel__option-label {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-handoff-panel__option-meta {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--eth-space-xs);
+  justify-content: flex-end;
+}
+
+.eth-task-handoff-panel__reason-field,
+.eth-task-handoff-panel__reason-field .cds--text-area__wrapper,
+.eth-task-handoff-panel__reason-field .cds--text-area,
+.eth-task-handoff-panel__reason {
+  inline-size: 100%;
+}
+
+.eth-task-handoff-panel__reason-field .cds--text-area,
+.eth-task-handoff-panel__reason {
+  min-block-size: 7rem;
+  resize: vertical;
+}
+
+.eth-task-handoff-panel__actions {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  justify-content: flex-start;
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-task-run-log__toolbar {
+  align-items: flex-end;
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-task-run-log__stream-state {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-block-size: var(--eth-space-2xl);
+}
+
+.eth-task-run-log__stream-state .cds--tag {
+  margin: 0;
+}
+
+.eth-task-run-log__buffer-count {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  white-space: nowrap;
+}
+
+.eth-task-run-log__filters {
+  border: 0;
+  display: grid;
+  gap: var(--eth-space-xs);
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-task-run-log__filters legend {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.3333;
+  margin: 0;
+}
+
+.eth-task-run-log__filter-options {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-task-run-log__summary {
+  background: var(--eth-color-layer-01);
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+}
+
+.eth-task-run-log__summary div {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-task-run-log__summary div + div {
+  border-inline-start: 1px solid
+    var(--eth-color-border-subtle);
+}
+
+.eth-task-run-log__summary dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.3333;
+  margin: 0;
+}
+
+.eth-task-run-log__summary dd {
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-mono);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.4286;
+  margin: 0;
+}
+
+.eth-task-run-log__viewport {
+  background: var(--eth-color-layer-01);
+  color: var(--eth-color-text-primary);
+  max-block-size: 24rem;
+  min-block-size: 10rem;
+  min-inline-size: 0;
+  overflow: auto;
+}
+
+.eth-task-run-log__columns,
+.eth-task-run-log__entry {
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(6.5rem, 8rem) minmax(4.5rem, 5rem) minmax(0, 1fr);
+}
+
+.eth-task-run-log__columns {
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inset-block-start: 0;
+  line-height: 1.3333;
+  padding: var(--eth-space-sm) var(--eth-space-lg);
+  position: sticky;
+  z-index: 1;
+}
+
+.eth-task-run-log__entry {
+  border-block-end: 1px solid
+    var(--eth-color-border-subtle);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  padding: var(--eth-space-sm) var(--eth-space-lg);
+}
+
+.eth-task-run-log__entry:last-child {
+  border-block-end: 0;
+}
+
+.eth-task-run-log__entry:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-task-run-log__time,
+.eth-task-run-log__level,
+.eth-task-run-log__message {
+  font-family: var(--eth-font-mono);
+  min-inline-size: 0;
+}
+
+.eth-task-run-log__time {
+  color: var(--eth-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.eth-task-run-log__level {
+  color: var(--eth-color-text-secondary);
+  font-weight: 600;
+}
+
+.eth-task-run-log__level--error {
+  color: var(--eth-color-danger);
+}
+
+.eth-task-run-log__level--warn {
+  color: var(--eth-color-warning);
+}
+
+.eth-task-run-log__level--info {
+  color: var(--eth-color-info);
+}
+
+.eth-task-run-log__message {
+  color: var(--eth-color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.eth-task-run-log__message--redacted {
+  color: var(--eth-color-text-secondary);
+  font-style: italic;
+}
+
+.eth-task-thinking-chain__list,
+.eth-task-thinking-chain__children {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-task-thinking-chain__children {
+  margin-block-start: var(--eth-space-md);
+}
+
+.eth-task-thinking-chain__step > .eth-task-thinking-chain__children {
+  margin-block-start: 0;
+  padding: 0 var(--eth-space-md) var(--eth-space-md);
+}
+
+.eth-task-thinking-chain__item {
+  --eth-task-thinking-chain-accent: var(--eth-color-text-secondary);
+
+  display: grid;
+  gap: var(--eth-space-sm);
+  grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
+  min-inline-size: 0;
+  padding-block-end: var(--eth-space-md);
+  position: relative;
+}
+
+.eth-task-thinking-chain__item::before {
+  background: var(--eth-color-border-subtle);
+  block-size: calc(100% - var(--eth-space-2xl));
+  content: "";
+  inline-size: 1px;
+  inset-block-start: var(--eth-space-2xl);
+  inset-inline-start: calc(var(--eth-space-lg) / 2 - 0.0313rem);
+  position: absolute;
+}
+
+.eth-task-thinking-chain__item:last-child {
+  padding-block-end: 0;
+}
+
+.eth-task-thinking-chain__item:last-child::before {
+  content: none;
+}
+
+.eth-task-thinking-chain__item--completed,
+.eth-task-thinking-chain__item--succeeded,
+.eth-task-thinking-chain__item--synced,
+.eth-task-thinking-chain__item--active {
+  --eth-task-thinking-chain-accent: var(--eth-color-success);
+}
+
+.eth-task-thinking-chain__item--running,
+.eth-task-thinking-chain__item--in-progress,
+.eth-task-thinking-chain__item--queued {
+  --eth-task-thinking-chain-accent: var(--eth-color-info);
+}
+
+.eth-task-thinking-chain__item--pending-approval,
+.eth-task-thinking-chain__item--warning,
+.eth-task-thinking-chain__item--stale,
+.eth-task-thinking-chain__item--redacted {
+  --eth-task-thinking-chain-accent: var(--eth-color-warning);
+}
+
+.eth-task-thinking-chain__item--approval-required,
+.eth-task-thinking-chain__item--blocked,
+.eth-task-thinking-chain__item--failed {
+  --eth-task-thinking-chain-accent: var(--eth-color-danger);
+}
+
+.eth-task-thinking-chain__marker {
+  align-self: start;
+  background: var(--eth-color-layer-01);
+  block-size: 0.75rem;
+  border: 2px solid var(--eth-task-thinking-chain-accent);
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--eth-color-layer-01);
+  inline-size: 0.75rem;
+  margin-block-start: var(--eth-space-lg);
+  margin-inline: auto;
+  position: relative;
+  z-index: 1;
+}
+
+.eth-task-thinking-chain__step {
+  background: var(--eth-color-layer-01);
+  border: 1px solid
+    var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-task-thinking-chain__item--running > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--in-progress > .eth-task-thinking-chain__step {
+  background: var(--eth-color-layer-02);
+  border-inline-start: 3px solid var(--eth-color-interactive-primary);
+}
+
+.eth-task-thinking-chain__item--pending-approval > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--warning > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--stale > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--redacted > .eth-task-thinking-chain__step {
+  border-inline-start: 3px solid var(--eth-color-warning);
+}
+
+.eth-task-thinking-chain__item--approval-required > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--blocked > .eth-task-thinking-chain__step,
+.eth-task-thinking-chain__item--failed > .eth-task-thinking-chain__step {
+  border-inline-start: 3px solid var(--eth-color-danger);
+}
+
+.eth-task-thinking-chain__step-header {
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  gap: var(--eth-space-sm);
+  grid-template-columns: 1rem minmax(0, 1fr);
+  list-style: none;
+  min-block-size: var(--eth-space-2xl);
+  padding: var(--eth-space-md);
+}
+
+.eth-task-thinking-chain__step-header::-webkit-details-marker {
+  display: none;
+}
+
+.eth-task-thinking-chain__step-header::marker {
+  content: "";
+}
+
+.eth-task-thinking-chain__step-header:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-task-thinking-chain__disclosure-icon {
+  block-size: 1rem;
+  display: grid;
+  inline-size: 1rem;
+  place-items: center;
+}
+
+.eth-task-thinking-chain__disclosure-icon::before {
+  border-block: 0.25rem solid transparent;
+  border-inline-start: 0.3125rem solid
+    var(--eth-color-text-secondary);
+  content: "";
+  transform-origin: 35% 50%;
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-task-thinking-chain__step[open] .eth-task-thinking-chain__disclosure-icon::before {
+  transform: rotate(90deg);
+}
+
+.eth-task-thinking-chain__step-header-inner {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm) var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-task-thinking-chain__step-heading,
+.eth-task-thinking-chain__step-meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-xs) var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-task-thinking-chain__step-meta {
+  justify-content: flex-end;
+}
+
+.eth-task-thinking-chain__step-meta .eth-status-dot,
+.eth-task-thinking-chain__step-meta .cds--tag {
+  margin: 0;
+}
+
+.eth-task-thinking-chain__step-title {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  overflow-wrap: anywhere;
+}
+
+.eth-task-thinking-chain__branch-count,
+.eth-task-thinking-chain__duration,
+.eth-task-thinking-chain__streaming {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.333;
+  white-space: nowrap;
+}
+
+.eth-task-thinking-chain__branch-count {
+  background: var(--eth-color-layer-02);
+  display: inline-flex;
+  padding: var(--eth-space-2xs) var(--eth-space-sm);
+}
+
+.eth-task-thinking-chain__streaming {
+  align-items: center;
+  color: var(--eth-color-info);
+  display: inline-flex;
+  gap: var(--eth-space-xs);
+}
+
+.eth-task-thinking-chain__summary,
+.eth-task-thinking-chain__redacted {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  padding: 0 var(--eth-space-md) var(--eth-space-md);
+}
+
+.eth-task-thinking-chain__redacted {
+  background: var(--eth-color-layer-02);
+  border-block-start: 1px solid
+    var(--eth-color-border-subtle);
+  padding-block-start: var(--eth-space-sm);
+}
+
+.eth-task-thinking-chain__pulse {
+  animation: eth-task-pulse 1s cubic-bezier(0.2, 0, 0.38, 0.9) infinite;
+  background: var(--eth-color-info);
+  border-radius: 50%;
+  block-size: var(--eth-space-sm);
+  inline-size: var(--eth-space-sm);
+}
+
+@keyframes eth-task-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (width <= 42rem) {
+  .eth-task-run-log > .eth-surface__header,
+  .eth-task-run-log__toolbar {
+    padding-inline: var(--eth-space-md);
+  }
+
+  .eth-task-run-log__toolbar,
+  .eth-task-run-log__stream-state {
+    align-items: flex-start;
+  }
+
+  .eth-task-run-log__summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .eth-task-run-log__summary div:nth-child(odd) {
+    border-inline-start: 0;
+  }
+
+  .eth-task-run-log__summary div:nth-child(n + 3) {
+    border-block-start: 1px solid
+      var(--eth-color-border-subtle);
+  }
+
+  .eth-task-run-log__viewport {
+    overflow-x: auto;
+  }
+
+  .eth-task-run-log__columns,
+  .eth-task-run-log__entry {
+    grid-template-columns: 6.5rem 4.5rem minmax(14rem, 1fr);
+    min-inline-size: 28rem;
+    padding-inline: var(--eth-space-md);
+  }
+
+  .eth-task-thinking-chain__item {
+    grid-template-columns: var(--eth-space-md) minmax(0, 1fr);
+  }
+
+  .eth-task-thinking-chain__item::before {
+    inset-inline-start: calc(var(--eth-space-md) / 2 - 0.0313rem);
+  }
+
+  .eth-task-thinking-chain__step-header-inner,
+  .eth-task-thinking-chain__step-meta {
+    justify-content: flex-start;
+  }
+
+  .eth-task-progress__steps {
+    align-items: stretch;
+    flex-direction: column;
+    overflow-x: visible;
+    padding-block-end: 0;
+  }
+
+  .eth-task-progress__step {
+    flex-basis: auto;
+    gap: 0 var(--eth-space-sm);
+    grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
+    grid-template-rows: auto;
+    min-inline-size: 0;
+    padding-inline-end: 0;
+  }
+
+  .eth-task-progress__step-track {
+    align-self: stretch;
+    gap: var(--eth-space-xs);
+    grid-template-columns: var(--eth-space-lg);
+    grid-template-rows: var(--eth-space-lg) minmax(var(--eth-space-lg), 1fr);
+  }
+
+  .eth-task-progress__connector {
+    block-size: 100%;
+    inline-size: 1px;
+    justify-self: center;
+  }
+
+  .eth-task-progress__step-copy {
+    padding-block-end: var(--eth-space-lg);
+  }
+
+  .eth-task-progress__step:last-child .eth-task-progress__step-copy {
+    padding-block-end: 0;
+  }
+
+  .eth-task-blocking-reason-panel__item {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-dependencies__item {
+    align-items: start;
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-handoff-panel__option {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-handoff-panel__option-meta {
+    justify-content: flex-start;
+  }
+
+  .eth-task-dependencies__group-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .eth-task-dependencies__item .eth-task-status-badge {
+    justify-self: start;
+  }
+
+  .eth-task-timeline__event {
+    grid-template-columns: 1rem minmax(0, 1fr);
+  }
+
+  .eth-task-timeline__time {
+    grid-column: 2;
+    justify-self: start;
+    padding-block-start: 0;
+  }
+
+  .eth-task-timeline__rail {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  .eth-task-timeline__body {
+    grid-column: 2;
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-blocking-reason-panel__actions {
+    justify-self: stretch;
+  }
+
+  .eth-task-blocking-reason-panel__actions .eth-actions {
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  .eth-task-detail-panel__actions .eth-actions {
+    align-items: stretch;
+  }
+
+  .eth-task-detail-panel__actions .eth-button {
+    inline-size: 100%;
+  }
+}
+
+@media (width <= 50rem) {
+  .eth-task-retry-panel__policy {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 36rem) {
+  .eth-task-retry-panel {
+    inline-size: 100%;
+  }
+
+  .eth-task-retry-panel__policy {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-task-retry-panel__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-task-retry-panel__actions .eth-button {
+    inline-size: 100%;
+  }
+}