@echothink-ui/project 0.1.0

package/src/styles.css

@@ -0,0 +1,2431 @@
+@import "@echothink-ui/core/styles.css";
+@import "@echothink-ui/layouts/styles.css";
+@import "@echothink-ui/data/styles.css";
+@import "@echothink-ui/charts/styles.css";
+
+.eth-project-management-page,
+.eth-project-status-summary,
+.eth-project-table {
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-family);
+  min-inline-size: 0;
+}
+
+.eth-project-management-page {
+  background: var(--eth-color-background);
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: 100%;
+}
+
+.eth-project-management-page > .eth-page-header {
+  margin: 0;
+}
+
+.eth-project-management-page__filters {
+  align-items: flex-end;
+  background: var(--eth-color-layer-01);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+  padding-inline: var(--eth-space-xl);
+  scrollbar-width: none;
+}
+
+.eth-project-management-page__filters::-webkit-scrollbar {
+  display: none;
+}
+
+.eth-project-management-page__filter {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-block-end: 2px solid transparent;
+  color: var(--eth-color-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font: inherit;
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  min-block-size: 2.5rem;
+  padding: 0 var(--eth-space-lg);
+  position: relative;
+  white-space: nowrap;
+}
+
+.eth-project-management-page__filter:hover {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-project-management-page__filter:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-management-page__filter[aria-disabled="true"] {
+  cursor: default;
+}
+
+.eth-project-management-page__filter--active {
+  border-block-end-color: var(--eth-color-interactive-primary);
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-project-status-summary {
+  display: grid;
+  gap: var(--eth-space-lg);
+  padding-inline: var(--eth-space-xl);
+}
+
+.eth-project-status-summary__kpis {
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary .eth-kpi {
+  background: var(--eth-color-layer-01);
+  block-size: 100%;
+  min-block-size: 7rem;
+}
+
+.eth-project-status-summary__bar {
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  min-block-size: 0.5rem;
+  overflow: hidden;
+}
+
+.eth-project-status-summary__bar-segment {
+  background: var(--eth-color-border-strong);
+  display: block;
+  min-inline-size: 0.25rem;
+}
+
+.eth-project-status-summary__bar-segment--running {
+  background: var(--eth-color-info);
+}
+
+.eth-project-status-summary__bar-segment--in-progress {
+  background: #4589ff;
+}
+
+.eth-project-status-summary__bar-segment--approval-required,
+.eth-project-status-summary__bar-segment--blocked,
+.eth-project-status-summary__bar-segment--failed {
+  background: var(--eth-color-danger);
+}
+
+.eth-project-status-summary__bar-segment--completed,
+.eth-project-status-summary__bar-segment--succeeded {
+  background: var(--eth-color-success);
+}
+
+.eth-project-status-summary__bar-segment--not-started {
+  background: var(--eth-color-text-helper);
+}
+
+.eth-project-status-summary__legend {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-project-table {
+  padding-block-end: var(--eth-space-xl);
+  padding-inline: var(--eth-space-xl);
+}
+
+.eth-project-table .eth-data-table-wrap {
+  background: var(--eth-color-layer-01);
+}
+
+.eth-project-table .eth-project-table__table {
+  inline-size: 100%;
+  min-inline-size: 58rem;
+  table-layout: fixed;
+}
+
+.eth-project-table .eth-project-table__table th,
+.eth-project-table .eth-project-table__table td {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  overflow: hidden;
+  padding-inline: var(--eth-space-lg);
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+.eth-project-table .eth-project-table__table thead th {
+  background: var(--eth-color-layer-selected);
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.eth-project-table__name {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-project-table__title,
+.eth-project-table__description,
+.eth-project-table__owner,
+.eth-project-table__updated {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-table__title {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-project-table__description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-table__title-button.eth-button {
+  block-size: auto;
+  display: inline-flex;
+  justify-content: flex-start;
+  min-block-size: 1.5rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 0;
+  text-align: start;
+}
+
+.eth-project-table__title-button.eth-button .cds--btn__text {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-table__status {
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-project-table__metric {
+  display: block;
+  font-variant-numeric: tabular-nums;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-tab {
+  font-family: var(--eth-font-family);
+}
+
+.eth-project-card {
+  --eth-project-card-accent: var(--eth-color-interactive-primary);
+  --eth-project-card-border: var(--eth-color-border-subtle);
+  --eth-project-card-layer: var(--eth-color-layer-01);
+  --eth-project-card-layer-alt: var(--eth-color-layer-02);
+  --eth-project-card-text-secondary: var(--eth-color-text-secondary);
+
+  background: var(--eth-project-card-layer);
+  border: 1px solid var(--eth-project-card-border);
+  border-block-start: 3px solid var(--eth-project-card-accent);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  font-family: var(--eth-font-family);
+  grid-template-rows: auto 1fr auto;
+  inline-size: min(100%, 44rem);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.eth-project-card--blocked,
+.eth-project-card--failed,
+.eth-project-card--approval-required {
+  --eth-project-card-accent: var(--eth-color-danger);
+}
+
+.eth-project-card--warning,
+.eth-project-card--stale,
+.eth-project-card--pending-approval {
+  --eth-project-card-accent: var(--eth-color-warning);
+}
+
+.eth-project-card--succeeded,
+.eth-project-card--completed,
+.eth-project-card--synced,
+.eth-project-card--active {
+  --eth-project-card-accent: var(--eth-color-success);
+}
+
+.eth-project-card--inactive,
+.eth-project-card--not-started,
+.eth-project-card--paused {
+  --eth-project-card-accent: var(--eth-color-border-strong);
+}
+
+.eth-project-card__header {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-project-card-border);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-card__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-project-card__heading h3,
+.eth-project-card__heading p,
+.eth-project-card__metadata,
+.eth-project-card__metadata dt,
+.eth-project-card__metadata dd {
+  margin: 0;
+}
+
+.eth-project-card__heading h3 {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-card__heading p {
+  color: var(--eth-project-card-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-card__status {
+  justify-self: end;
+  min-inline-size: 0;
+}
+
+.eth-project-card__status .cds--tag,
+.eth-project-card .eth-status-dot {
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+.eth-project-card__metadata {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+.eth-project-card__metadata div {
+  align-content: start;
+  border-inline-end: 1px solid var(--eth-project-card-border);
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-block-size: 5rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-card__metadata div:last-child {
+  border-inline-end: 0;
+}
+
+.eth-project-card__metadata dt {
+  color: var(--eth-project-card-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3333;
+}
+
+.eth-project-card__metadata dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.4286;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-card__actions {
+  align-items: center;
+  background: var(--eth-project-card-layer-alt);
+  border-block-start: 1px solid var(--eth-project-card-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  min-block-size: 3rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-project-card__actions .eth-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  min-inline-size: 0;
+}
+
+.eth-project-card__actions .eth-button {
+  min-inline-size: 6rem;
+}
+
+.eth-project-scope-selector {
+  color: var(--eth-color-text-primary);
+  inline-size: min(100%, 48rem);
+  min-inline-size: 0;
+}
+
+.eth-project-scope-selector:focus {
+  outline: none;
+}
+
+.eth-project-scope-selector:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: 2px;
+}
+
+.eth-project-scope-selector__group {
+  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(11.5rem, 1fr));
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-project-scope-selector__item {
+  background: var(--eth-color-layer-01);
+  color: var(--eth-color-text-primary);
+  cursor: pointer;
+  display: block;
+  min-block-size: 4.5rem;
+  min-inline-size: 0;
+  position: relative;
+}
+
+.eth-project-scope-selector__item:not(.eth-project-scope-selector__item--readonly):hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-project-scope-selector__item--active {
+  background: var(--eth-color-layer-selected);
+  box-shadow: inset 0 0 0 2px var(--eth-color-focus);
+  z-index: 1;
+}
+
+.eth-project-scope-selector__item--active::before {
+  background: var(--eth-color-focus);
+  block-size: 0.1875rem;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  position: absolute;
+}
+
+.eth-project-scope-selector__item--readonly {
+  cursor: default;
+}
+
+.eth-project-scope-selector__item:focus-within {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+  z-index: 2;
+}
+
+.eth-project-scope-selector__control {
+  block-size: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.eth-project-scope-selector__content {
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-block-size: 4.5rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+  padding-block-start: var(--eth-space-md);
+}
+
+.eth-project-scope-selector__title-row {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-project-scope-selector__label {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-scope-selector__status {
+  display: inline-flex;
+  flex: 0 1 auto;
+  min-inline-size: 0;
+}
+
+.eth-project-scope-selector__status .eth-status-dot {
+  margin: 0;
+  max-inline-size: 8rem;
+}
+
+.eth-project-scope-selector__kind {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-scope-selector__empty.eth-state {
+  inline-size: 100%;
+  margin: 0;
+}
+
+@media (max-width: 36rem) {
+  .eth-project-scope-selector__group {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-scope-selector__content {
+    min-block-size: 4rem;
+  }
+}
+
+.eth-project-summary-panel {
+  --eth-project-summary-accent: var(--eth-color-interactive-primary);
+  --eth-project-summary-border: var(--eth-color-border-subtle);
+  --eth-project-summary-layer: var(--eth-color-layer-01);
+  --eth-project-summary-layer-alt: var(--eth-color-layer-02);
+  --eth-project-summary-text-secondary: var(--eth-color-text-secondary);
+
+  background: var(--eth-project-summary-layer);
+  border: 1px solid var(--eth-project-summary-border);
+  border-block-start: 3px solid var(--eth-project-summary-accent);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  font-family: var(--eth-font-family);
+  inline-size: min(100%, 36rem);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.eth-project-summary-panel--blocked,
+.eth-project-summary-panel--failed,
+.eth-project-summary-panel--approval-required {
+  --eth-project-summary-accent: var(--eth-color-danger);
+}
+
+.eth-project-summary-panel--warning,
+.eth-project-summary-panel--stale,
+.eth-project-summary-panel--pending-approval {
+  --eth-project-summary-accent: var(--eth-color-warning);
+}
+
+.eth-project-summary-panel--succeeded,
+.eth-project-summary-panel--completed,
+.eth-project-summary-panel--synced,
+.eth-project-summary-panel--active {
+  --eth-project-summary-accent: var(--eth-color-success);
+}
+
+.eth-project-summary-panel--inactive,
+.eth-project-summary-panel--not-started,
+.eth-project-summary-panel--paused {
+  --eth-project-summary-accent: var(--eth-color-border-strong);
+}
+
+.eth-project-summary-panel:focus {
+  outline: none;
+}
+
+.eth-project-summary-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-summary-panel__header {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-project-summary-border);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-summary-panel__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-project-summary-panel__heading h3,
+.eth-project-summary-panel__heading p,
+.eth-project-summary-panel__metadata,
+.eth-project-summary-panel__metadata dt,
+.eth-project-summary-panel__metadata dd {
+  margin: 0;
+}
+
+.eth-project-summary-panel__heading h3 {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-summary-panel__heading p {
+  color: var(--eth-project-summary-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-summary-panel__status {
+  justify-self: end;
+  min-inline-size: 0;
+}
+
+.eth-project-summary-panel__status .eth-badge,
+.eth-project-summary-panel .eth-status-dot {
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+.eth-project-summary-panel__metadata {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+.eth-project-summary-panel__metadata-item {
+  align-content: start;
+  border-block-end: 1px solid var(--eth-project-summary-border);
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-block-size: 4.75rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-summary-panel__metadata-item:nth-child(odd) {
+  border-inline-end: 1px solid var(--eth-project-summary-border);
+}
+
+.eth-project-summary-panel__metadata-item:nth-last-child(-n + 2) {
+  border-block-end: 0;
+}
+
+.eth-project-summary-panel__metadata-item--health {
+  background: var(--eth-project-summary-layer-alt);
+}
+
+.eth-project-summary-panel__metadata dt {
+  color: var(--eth-project-summary-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3333;
+}
+
+.eth-project-summary-panel__metadata dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.4286;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (width <= 36rem) {
+  .eth-project-summary-panel {
+    inline-size: 100%;
+  }
+
+  .eth-project-summary-panel__header {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-summary-panel__status {
+    justify-self: start;
+  }
+
+  .eth-project-summary-panel__metadata {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-summary-panel__metadata-item,
+  .eth-project-summary-panel__metadata-item:nth-child(odd) {
+    border-inline-end: 0;
+  }
+
+  .eth-project-summary-panel__metadata-item:nth-last-child(-n + 2) {
+    border-block-end: 1px solid var(--eth-project-summary-border);
+  }
+
+  .eth-project-summary-panel__metadata-item:last-child {
+    border-block-end: 0;
+  }
+}
+
+.eth-project-status-summary {
+  --eth-project-status-border: var(--eth-color-border-subtle);
+  --eth-project-status-layer: var(--eth-color-layer-01);
+  --eth-project-status-layer-raised: var(--eth-color-layer-02);
+
+  background: var(--eth-project-status-layer);
+  border: 1px solid var(--eth-project-status-border);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  font-family: var(--eth-font-family);
+  inline-size: min(100%, 56rem);
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary:focus {
+  outline: none;
+}
+
+.eth-project-status-summary:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-status-summary__header {
+  align-items: flex-start;
+  background: var(--eth-project-status-layer-raised);
+  border-block-end: 1px solid var(--eth-project-status-border);
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-status-summary__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__heading h3,
+.eth-project-status-summary__heading p,
+.eth-project-status-summary__empty {
+  margin: 0;
+}
+
+.eth-project-status-summary__heading h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-status-summary__heading p,
+.eth-project-status-summary__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-status-summary__header > .eth-badge {
+  flex: 0 1 auto;
+  margin: 0;
+  max-inline-size: 14rem;
+}
+
+.eth-project-status-summary__kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__kpis .eth-kpi {
+  align-content: start;
+  background: var(--eth-project-status-layer-raised);
+  border: 0;
+  border-block-start: 0;
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-block-size: 6.75rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-status-summary__kpis .eth-kpi + .eth-kpi {
+  border-inline-start: 1px solid var(--eth-project-status-border);
+}
+
+.eth-project-status-summary__kpis .eth-kpi__header {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-xs);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__kpis .eth-kpi__title,
+.eth-project-status-summary__kpis .eth-kpi__description {
+  color: var(--eth-color-text-secondary);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-project-status-summary__kpis .eth-kpi__value {
+  color: var(--eth-color-text-primary);
+  display: block;
+  font-size: calc(1.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.2857;
+}
+
+.eth-project-status-summary__distribution {
+  border-block-start: 1px solid var(--eth-project-status-border);
+  display: grid;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-status-summary__bar {
+  background: var(--eth-color-border-subtle);
+  block-size: var(--eth-space-sm);
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.eth-project-status-summary__bar-segment {
+  background: var(--eth-color-border-strong);
+  flex-basis: 0;
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__bar-segment + .eth-project-status-summary__bar-segment {
+  border-inline-start: 1px solid var(--eth-project-status-layer-raised);
+}
+
+.eth-project-status-summary__bar-segment--inflight,
+.eth-project-status-summary__bar-segment--running,
+.eth-project-status-summary__bar-segment--in-progress {
+  background: var(--eth-color-info);
+}
+
+.eth-project-status-summary__bar-segment--attention,
+.eth-project-status-summary__bar-segment--approval-required,
+.eth-project-status-summary__bar-segment--blocked,
+.eth-project-status-summary__bar-segment--failed {
+  background: var(--eth-color-danger);
+}
+
+.eth-project-status-summary__bar-segment--warning,
+.eth-project-status-summary__bar-segment--pending-approval,
+.eth-project-status-summary__bar-segment--stale {
+  background: var(--eth-color-warning);
+}
+
+.eth-project-status-summary__bar-segment--complete,
+.eth-project-status-summary__bar-segment--completed,
+.eth-project-status-summary__bar-segment--succeeded,
+.eth-project-status-summary__bar-segment--synced,
+.eth-project-status-summary__bar-segment--active {
+  background: var(--eth-color-success);
+}
+
+.eth-project-status-summary__bar-segment--paused,
+.eth-project-status-summary__bar-segment--queued,
+.eth-project-status-summary__bar-segment--not-started,
+.eth-project-status-summary__bar-segment--inactive {
+  background: var(--eth-color-border-strong);
+}
+
+.eth-project-status-summary__legend {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__legend > span {
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-project-status-summary__legend .eth-status-dot {
+  background: var(--eth-project-status-layer);
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+@media (width <= 54rem) {
+  .eth-project-status-summary__kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .eth-project-status-summary__kpis .eth-kpi {
+    border-block-start: 1px solid var(--eth-project-status-border);
+  }
+
+  .eth-project-status-summary__kpis .eth-kpi:nth-child(-n + 2) {
+    border-block-start: 0;
+  }
+
+  .eth-project-status-summary__kpis .eth-kpi:nth-child(2n + 1) {
+    border-inline-start: 0;
+  }
+}
+
+@media (width <= 34rem) {
+  .eth-project-status-summary__header {
+    display: grid;
+  }
+
+  .eth-project-status-summary__kpis {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-project-status-summary__kpis .eth-kpi,
+  .eth-project-status-summary__kpis .eth-kpi:nth-child(-n + 2) {
+    border-block-start: 1px solid var(--eth-project-status-border);
+    border-inline-start: 0;
+  }
+
+  .eth-project-status-summary__kpis .eth-kpi:first-child {
+    border-block-start: 0;
+  }
+}
+
+.eth-project-app-domain-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-app-domain-panel:focus {
+  outline: none;
+}
+
+.eth-project-app-domain-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-app-domain-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-project-app-domain-panel__header h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+}
+
+.eth-project-app-domain-panel__summary {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
+  margin: 0;
+}
+
+.eth-project-app-domain-panel__summary div {
+  background: var(--eth-color-layer-02);
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-app-domain-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-app-domain-panel__summary dt,
+.eth-project-app-domain-panel__summary dd {
+  margin: 0;
+}
+
+.eth-project-app-domain-panel__summary dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-app-domain-panel__summary dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-project-app-domain-panel .eth-data-table-wrap {
+  border-color: var(--eth-color-border-subtle);
+}
+
+.eth-project-app-domain-panel__table {
+  min-inline-size: 36rem;
+  table-layout: fixed;
+}
+
+.eth-project-app-domain-panel__domain {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-project-app-domain-panel__domain strong,
+.eth-project-app-domain-panel__domain span {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-app-domain-panel__domain strong {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-project-app-domain-panel__domain span {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-app-domain-panel .eth-data-table__actions {
+  gap: var(--eth-space-xs);
+}
+
+.eth-project-members-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-members-panel:focus {
+  outline: none;
+}
+
+.eth-project-members-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-members-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-project-members-panel__heading {
+  display: grid;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+}
+
+.eth-project-members-panel__heading h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+}
+
+.eth-project-resource-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-resource-panel:focus {
+  outline: none;
+}
+
+.eth-project-resource-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-resource-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.eth-project-resource-panel__header h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+}
+
+.eth-project-resource-panel__summary {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
+  margin: 0;
+}
+
+.eth-project-resource-panel__summary div {
+  background: var(--eth-color-layer-02);
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-resource-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-resource-panel__summary dt,
+.eth-project-resource-panel__summary dd {
+  margin: 0;
+}
+
+.eth-project-resource-panel__summary dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-resource-panel__summary dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-project-resource-panel .eth-data-table-wrap {
+  border-color: var(--eth-color-border-subtle);
+}
+
+.eth-project-resource-panel__table {
+  min-inline-size: 44rem;
+  table-layout: fixed;
+}
+
+.eth-project-resource-panel__resource {
+  align-items: center;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: 2rem minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.eth-project-resource-panel__resource-icon {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  block-size: 2rem;
+  color: var(--eth-color-text-secondary);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: 2rem;
+  justify-content: center;
+  line-height: 1;
+}
+
+.eth-project-resource-panel__resource-copy {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-project-resource-panel__resource-copy strong,
+.eth-project-resource-panel__resource-copy span {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-resource-panel__resource-copy strong {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-project-resource-panel__resource-copy span,
+.eth-project-resource-panel__muted {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-resource-panel__updated {
+  color: var(--eth-color-text-primary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.eth-project-resource-panel .eth-data-table__actions {
+  gap: var(--eth-space-xs);
+}
+
+@media (max-width: 42rem) {
+  .eth-project-resource-panel {
+    padding: var(--eth-space-md);
+  }
+
+  .eth-project-resource-panel__header {
+    display: grid;
+  }
+
+  .eth-project-resource-panel__summary {
+    inline-size: 100%;
+  }
+}
+
+.eth-project-activity-timeline {
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-lg);
+  inline-size: min(100%, 44rem);
+  min-inline-size: 0;
+}
+
+.eth-project-activity-timeline__header {
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  padding-block-end: var(--eth-space-sm);
+}
+
+.eth-project-activity-timeline__header h3 {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin: 0;
+}
+
+.eth-project-activity-timeline__list {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.eth-project-activity-timeline__item {
+  --eth-project-activity-accent: var(--eth-color-interactive-primary);
+
+  display: grid;
+  gap: 0 var(--eth-space-md);
+  grid-template-columns: minmax(3.75rem, max-content) 1rem minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.eth-project-activity-timeline__item--success {
+  --eth-project-activity-accent: var(--eth-color-success);
+}
+
+.eth-project-activity-timeline__item--warning {
+  --eth-project-activity-accent: var(--eth-color-warning);
+}
+
+.eth-project-activity-timeline__item--danger {
+  --eth-project-activity-accent: var(--eth-color-danger);
+}
+
+.eth-project-activity-timeline__item--neutral {
+  --eth-project-activity-accent: var(--eth-color-border-strong);
+}
+
+.eth-project-activity-timeline__time {
+  color: var(--eth-color-text-secondary);
+  font-family: var(--eth-font-mono);
+  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-project-activity-timeline__rail {
+  display: flex;
+  justify-content: center;
+  min-block-size: 100%;
+  position: relative;
+}
+
+.eth-project-activity-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-project-activity-timeline__item:last-child .eth-project-activity-timeline__rail::after {
+  display: none;
+}
+
+.eth-project-activity-timeline__marker {
+  background: var(--eth-project-activity-accent);
+  block-size: 0.625rem;
+  border: 2px solid var(--eth-color-layer-01);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px var(--eth-project-activity-accent);
+  inline-size: 0.625rem;
+  margin-block-start: var(--eth-space-xs);
+  position: relative;
+  z-index: 1;
+}
+
+.eth-project-activity-timeline__event {
+  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-project-activity-timeline__item + .eth-project-activity-timeline__item
+  .eth-project-activity-timeline__time,
+.eth-project-activity-timeline__item + .eth-project-activity-timeline__item
+  .eth-project-activity-timeline__rail,
+.eth-project-activity-timeline__item + .eth-project-activity-timeline__item
+  .eth-project-activity-timeline__event {
+  padding-block-start: var(--eth-space-lg);
+}
+
+.eth-project-activity-timeline__item:last-child .eth-project-activity-timeline__event {
+  border-block-end: 0;
+  padding-block-end: 0;
+}
+
+.eth-project-activity-timeline__event-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-project-activity-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-project-activity-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-project-activity-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-project-create-form {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  inline-size: min(100%, 54rem);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-project-create-form__header {
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-sm);
+  padding: var(--eth-space-xl);
+}
+
+.eth-project-create-form__title {
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.eth-project-create-form__description {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  max-inline-size: 42rem;
+}
+
+.eth-project-create-form__validation {
+  margin: var(--eth-space-lg) var(--eth-space-xl) 0;
+}
+
+.eth-project-create-form__section.eth-form-section {
+  border-block-start: 0;
+  padding: var(--eth-space-xl);
+}
+
+.eth-project-create-form__section + .eth-project-create-form__section {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-create-form__grid {
+  align-items: start;
+  column-gap: var(--eth-space-xl);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-inline-size: 0;
+  row-gap: var(--eth-space-lg);
+}
+
+.eth-project-create-form__grid--setup {
+  grid-template-columns: minmax(14rem, 24rem);
+}
+
+.eth-project-create-form__field,
+.eth-project-create-form__field .cds--text-input-wrapper,
+.eth-project-create-form__field .cds--select,
+.eth-project-create-form__field .cds--select-input,
+.eth-project-create-form__field .cds--text-input,
+.eth-project-create-form__field .cds--text-area__wrapper,
+.eth-project-create-form__field .cds--text-area {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-project-create-form__field--wide {
+  grid-column: 1 / -1;
+}
+
+.eth-project-create-form__field .cds--text-area {
+  min-block-size: 7rem;
+  resize: vertical;
+}
+
+.eth-project-create-form__actions {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  padding: var(--eth-space-lg) var(--eth-space-xl);
+}
+
+.eth-project-create-form__actions .eth-button {
+  min-inline-size: 8.5rem;
+}
+
+@media (width <= 72rem) {
+  .eth-project-status-summary__kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 48rem) {
+  .eth-project-management-page {
+    gap: var(--eth-space-md);
+  }
+
+  .eth-project-management-page__filters,
+  .eth-project-status-summary,
+  .eth-project-table {
+    padding-inline: var(--eth-space-lg);
+  }
+
+  .eth-project-status-summary__kpis {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-project-card {
+    inline-size: 100%;
+  }
+
+  .eth-project-card__header {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-card__status {
+    justify-self: start;
+  }
+
+  .eth-project-card__metadata {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .eth-project-card__metadata div {
+    border-block-end: 1px solid var(--eth-project-card-border);
+  }
+
+  .eth-project-card__metadata div:nth-child(2n) {
+    border-inline-end: 0;
+  }
+
+  .eth-project-card__metadata div:last-child {
+    border-block-end: 0;
+    grid-column: 1 / -1;
+  }
+
+  .eth-project-card__actions,
+  .eth-project-card__actions .eth-actions {
+    justify-content: stretch;
+  }
+
+  .eth-project-card__actions .eth-button {
+    flex: 1 1 10rem;
+  }
+}
+
+.eth-project-members-panel__summary {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
+  margin: 0;
+  max-inline-size: 22rem;
+}
+
+.eth-project-members-panel__summary div {
+  background: var(--eth-color-layer-02);
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-members-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-members-panel__summary dt,
+.eth-project-members-panel__summary dd {
+  margin: 0;
+}
+
+.eth-project-members-panel__summary dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-members-panel__summary dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-project-members-panel .eth-data-table-wrap {
+  border-color: var(--eth-color-border-subtle);
+}
+
+.eth-project-members-panel__table {
+  min-inline-size: 42rem;
+  table-layout: fixed;
+}
+
+.eth-project-members-panel__member {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-md);
+  min-inline-size: 0;
+}
+
+.eth-project-members-panel__member strong {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-members-panel__avatar {
+  align-items: center;
+  background: var(--eth-color-layer-selected);
+  block-size: 2rem;
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: 2rem;
+  justify-content: center;
+  line-height: 1;
+  object-fit: cover;
+}
+
+.eth-project-members-panel__role-select {
+  inline-size: min(100%, 10rem);
+}
+
+.eth-project-members-panel__role-select .cds--select,
+.eth-project-members-panel__role-select .cds--select-input {
+  inline-size: 100%;
+}
+
+.eth-project-members-panel__role-badge {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  min-block-size: 1.5rem;
+  max-inline-size: 100%;
+  padding: 0 var(--eth-space-sm);
+}
+
+.eth-project-members-panel__role-badge,
+.eth-project-members-panel .eth-status-dot {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-members-panel .eth-data-table__actions {
+  gap: var(--eth-space-xs);
+}
+
+@media (max-width: 42rem) {
+  .eth-project-app-domain-panel {
+    padding: var(--eth-space-md);
+  }
+
+  .eth-project-app-domain-panel__header {
+    display: grid;
+  }
+
+  .eth-project-app-domain-panel__summary {
+    inline-size: 100%;
+  }
+
+  .eth-project-members-panel {
+    padding: var(--eth-space-md);
+  }
+
+  .eth-project-members-panel__header {
+    display: grid;
+  }
+
+  .eth-project-members-panel__summary {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+
+  .eth-project-create-form__header,
+  .eth-project-create-form__section.eth-form-section,
+  .eth-project-create-form__actions {
+    padding-inline: var(--eth-space-lg);
+  }
+
+  .eth-project-create-form__grid,
+  .eth-project-create-form__grid--setup {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-project-create-form__actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .eth-project-create-form__actions .eth-button {
+    inline-size: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .eth-project-activity-timeline__item {
+    grid-template-columns: 1rem minmax(0, 1fr);
+  }
+
+  .eth-project-activity-timeline__time {
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .eth-project-activity-timeline__rail {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  .eth-project-activity-timeline__event {
+    grid-column: 2;
+  }
+}
+
+.eth-project-settings-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  inline-size: min(100%, 64rem);
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel:focus {
+  outline: none;
+}
+
+.eth-project-settings-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-settings-panel__header {
+  align-items: start;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-xl);
+  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
+  min-inline-size: 0;
+  padding: var(--eth-space-xl);
+}
+
+.eth-project-settings-panel__heading {
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__eyebrow {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  letter-spacing: 0.04em;
+  line-height: 1.3333;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.eth-project-settings-panel__heading h2 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.2857;
+  margin: 0;
+}
+
+.eth-project-settings-panel__heading p:not(.eth-project-settings-panel__eyebrow) {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  max-inline-size: 40rem;
+}
+
+.eth-project-settings-panel__summary {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__summary div {
+  background: var(--eth-color-layer-02);
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-settings-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-settings-panel__summary dt,
+.eth-project-settings-panel__summary dd {
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__summary dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-settings-panel__summary dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-settings-panel__content {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel .eth-form-section {
+  border-block-start: 0;
+  gap: var(--eth-space-2xl);
+  grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
+  padding: var(--eth-space-xl);
+}
+
+.eth-project-settings-panel .eth-form-section + .eth-form-section {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-settings-panel .eth-form-section__header {
+  display: block;
+}
+
+.eth-project-settings-panel .eth-form-section__body {
+  gap: var(--eth-space-lg);
+}
+
+.eth-project-settings-panel__stack,
+.eth-project-settings-panel__members {
+  display: grid;
+  gap: var(--eth-space-lg);
+  max-inline-size: 36rem;
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__field-grid {
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: repeat(2, minmax(12rem, 1fr));
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel .cds--text-input-wrapper,
+.eth-project-settings-panel .cds--select,
+.eth-project-settings-panel .cds--select-input,
+.eth-project-settings-panel .cds--text-input,
+.eth-project-settings-panel .cds--text-area__wrapper,
+.eth-project-settings-panel .cds--text-area {
+  inline-size: 100%;
+}
+
+.eth-project-settings-panel__member-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-project-settings-panel__member-meta span + span::before {
+  color: var(--eth-color-border-strong);
+  content: "/";
+  margin-inline-end: var(--eth-space-sm);
+}
+
+.eth-project-settings-panel__member-list {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__member-row {
+  align-items: center;
+  background: var(--eth-color-layer-02);
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: 2rem minmax(0, 1fr) minmax(9rem, 12rem);
+  min-block-size: 3rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-settings-panel__member-row + .eth-project-settings-panel__member-row {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-settings-panel__member-avatar {
+  align-items: center;
+  background: var(--eth-color-layer-selected);
+  color: var(--eth-color-text-primary);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  block-size: 2rem;
+  inline-size: 2rem;
+  justify-content: center;
+  line-height: 1;
+}
+
+.eth-project-settings-panel__member-main {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+}
+
+.eth-project-settings-panel__member-main strong,
+.eth-project-settings-panel__member-main span {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-settings-panel__member-main strong {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+}
+
+.eth-project-settings-panel__member-main span,
+.eth-project-settings-panel__empty {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-settings-panel__empty {
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+@media (max-width: 58rem) {
+  .eth-project-settings-panel {
+    inline-size: 100%;
+  }
+
+  .eth-project-settings-panel__header,
+  .eth-project-settings-panel .eth-form-section {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-settings-panel__summary {
+    max-inline-size: 100%;
+  }
+}
+
+@media (max-width: 38rem) {
+  .eth-project-settings-panel__header,
+  .eth-project-settings-panel .eth-form-section {
+    padding: var(--eth-space-lg);
+  }
+
+  .eth-project-settings-panel__summary,
+  .eth-project-settings-panel__field-grid,
+  .eth-project-settings-panel__member-row {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-settings-panel__summary div + div,
+  .eth-project-settings-panel__member-row + .eth-project-settings-panel__member-row {
+    border-block-start: 1px solid var(--eth-color-border-subtle);
+    border-inline-start: 0;
+  }
+
+  .eth-project-settings-panel__member-avatar {
+    display: none;
+  }
+}
+
+.eth-project-model-config-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: 0;
+  inline-size: min(100%, 64rem);
+  min-inline-size: 0;
+}
+
+.eth-project-model-config-panel:focus {
+  outline: none;
+}
+
+.eth-project-model-config-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-model-config-panel__header {
+  align-items: start;
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  column-gap: var(--eth-space-xl);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
+  min-inline-size: 0;
+  padding: var(--eth-space-xl);
+  row-gap: var(--eth-space-lg);
+}
+
+.eth-project-model-config-panel__heading {
+  min-inline-size: 0;
+}
+
+.eth-project-model-config-panel__heading h3,
+.eth-project-model-config-panel__parameter-copy h4 {
+  color: var(--eth-color-text-primary);
+  margin: 0;
+}
+
+.eth-project-model-config-panel__heading h3 {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+}
+
+.eth-project-model-config-panel__heading p,
+.eth-project-model-config-panel__parameter-copy p {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: var(--eth-space-xs) 0 0;
+}
+
+.eth-project-model-config-panel__heading p {
+  max-inline-size: 42rem;
+}
+
+.eth-project-model-config-panel__summary {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.eth-project-model-config-panel__summary div {
+  background: var(--eth-color-layer-01);
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-model-config-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-project-model-config-panel__summary dt,
+.eth-project-model-config-panel__summary dd,
+.eth-project-model-config-panel__parameter-meta dt,
+.eth-project-model-config-panel__parameter-meta dd {
+  margin: 0;
+}
+
+.eth-project-model-config-panel__summary dt,
+.eth-project-model-config-panel__parameter-meta dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-model-config-panel__summary dd,
+.eth-project-model-config-panel__parameter-meta dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.2857;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-model-config-panel__selectors {
+  column-gap: var(--eth-space-lg);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(14rem, 1fr));
+  min-inline-size: 0;
+  padding: var(--eth-space-xl);
+  row-gap: var(--eth-space-lg);
+}
+
+.eth-project-model-config-panel__selectors .eth-form-field,
+.eth-project-model-config-panel__selectors .cds--select,
+.eth-project-model-config-panel__selectors .cds--select-input {
+  inline-size: 100%;
+}
+
+.eth-project-model-config-panel__parameters {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  min-inline-size: 0;
+}
+
+.eth-project-model-config-panel__parameter {
+  align-items: center;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  column-gap: var(--eth-space-2xl);
+  display: grid;
+  grid-template-columns: minmax(14rem, 20rem) minmax(20rem, 1fr);
+  min-inline-size: 0;
+  padding: var(--eth-space-xl);
+  row-gap: var(--eth-space-lg);
+}
+
+.eth-project-model-config-panel__parameter:last-child {
+  border-block-end: 0;
+}
+
+.eth-project-model-config-panel__parameter-copy,
+.eth-project-model-config-panel__parameter-control {
+  min-inline-size: 0;
+}
+
+.eth-project-model-config-panel__parameter-copy h4 {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.2857;
+}
+
+.eth-project-model-config-panel__parameter-copy p {
+  max-inline-size: 28rem;
+}
+
+.eth-project-model-config-panel__parameter-meta {
+  column-gap: var(--eth-space-lg);
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--eth-space-md) 0 0;
+  row-gap: var(--eth-space-sm);
+}
+
+.eth-project-model-config-panel__parameter-meta div {
+  min-inline-size: 4.75rem;
+}
+
+.eth-project-model-config-panel__parameter-control .cds--slider-container {
+  inline-size: 100%;
+  max-inline-size: none;
+}
+
+.eth-project-model-config-panel__parameter-control .cds--slider {
+  flex: 1 1 auto;
+  max-inline-size: none;
+}
+
+.eth-project-model-config-panel__parameter-control .cds--slider__range-label {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-project-model-config-panel__parameter-control .eth-number-input {
+  inline-size: min(100%, 14rem);
+}
+
+@media (max-width: 56rem) {
+  .eth-project-model-config-panel__header,
+  .eth-project-model-config-panel__parameter {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-model-config-panel__summary {
+    inline-size: 100%;
+  }
+}
+
+@media (max-width: 42rem) {
+  .eth-project-model-config-panel__header,
+  .eth-project-model-config-panel__selectors,
+  .eth-project-model-config-panel__parameter {
+    padding: var(--eth-space-lg);
+  }
+
+  .eth-project-model-config-panel__selectors,
+  .eth-project-model-config-panel__summary {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-project-model-config-panel__summary div + div {
+    border-block-start: 1px solid var(--eth-color-border-subtle);
+    border-inline-start: 0;
+  }
+}
+
+.eth-project-permission-panel {
+  --eth-project-permission-layer: var(--eth-color-layer-01);
+  --eth-project-permission-layer-alt: var(--eth-color-layer-02);
+  --eth-project-permission-layer-hover: var(--eth-color-layer-hover);
+  --eth-project-permission-border: var(--eth-color-border-subtle);
+  --eth-project-permission-text-secondary: var(--eth-color-text-secondary);
+
+  background: var(--eth-project-permission-layer);
+  border: 1px solid var(--eth-project-permission-border);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 64rem;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.eth-project-permission-panel:focus {
+  outline: none;
+}
+
+.eth-project-permission-panel:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-project-permission-panel__header {
+  align-items: flex-start;
+  border-block-end: 1px solid var(--eth-project-permission-border);
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-project-permission-panel__heading {
+  display: grid;
+  gap: var(--eth-space-xs);
+  min-inline-size: 0;
+}
+
+.eth-project-permission-panel__heading h3,
+.eth-project-permission-panel__heading p,
+.eth-project-permission-panel__summary {
+  margin: 0;
+}
+
+.eth-project-permission-panel__heading h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.eth-project-permission-panel__heading p {
+  color: var(--eth-project-permission-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+}
+
+.eth-project-permission-panel__summary {
+  border: 1px solid var(--eth-project-permission-border);
+  display: grid;
+  flex: 0 0 20rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.eth-project-permission-panel__summary div {
+  display: grid;
+  gap: var(--eth-space-2xs);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+}
+
+.eth-project-permission-panel__summary div + div {
+  border-inline-start: 1px solid var(--eth-project-permission-border);
+}
+
+.eth-project-permission-panel__summary dt,
+.eth-project-permission-panel__summary dd {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-project-permission-panel__summary dt {
+  color: var(--eth-project-permission-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-project-permission-panel__summary dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.2857;
+  margin: 0;
+}
+
+.eth-project-permission-panel .eth-data-table-wrap {
+  border: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+}
+
+.eth-project-permission-panel .eth-data-table {
+  background: var(--eth-project-permission-layer);
+  min-inline-size: 42rem;
+  table-layout: fixed;
+}
+
+.eth-project-permission-panel .eth-data-table th,
+.eth-project-permission-panel .eth-data-table td {
+  border-block-end: 1px solid var(--eth-project-permission-border);
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+  vertical-align: middle;
+}
+
+.eth-project-permission-panel .eth-data-table th {
+  background: var(--eth-project-permission-layer-alt);
+  color: var(--eth-project-permission-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3333;
+  white-space: nowrap;
+}
+
+.eth-project-permission-panel .eth-data-table td {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+}
+
+.eth-project-permission-panel .eth-data-table tbody tr:hover {
+  background: var(--eth-project-permission-layer-hover);
+}
+
+.eth-project-permission-panel .eth-data-table tbody tr:last-child td {
+  border-block-end: 0;
+}
+
+.eth-project-permission-panel__subject {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-project-permission-panel__resource {
+  color: var(--eth-project-permission-text-secondary);
+}
+
+.eth-project-permission-panel__state {
+  margin: 0;
+}
+
+.eth-project-permission-panel__toggle {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
+}
+
+.eth-project-permission-panel__toggle .cds--form-item,
+.eth-project-permission-panel__toggle .cds--checkbox-wrapper {
+  align-items: center;
+  display: inline-flex;
+  margin: 0;
+}
+
+.eth-project-permission-panel__empty {
+  padding: var(--eth-space-lg);
+}
+
+@media (max-width: 42rem) {
+  .eth-project-permission-panel__header {
+    display: grid;
+  }
+
+  .eth-project-permission-panel__summary {
+    flex-basis: auto;
+    inline-size: 100%;
+  }
+}