src/components/ComputeTargetCatalog.module.css

.root {
  container: ngs-compute / inline-size;
  min-width: 0;
}
.list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ngs-border);
  list-style: none;
}
.row {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(160px, 1fr) auto 100px 16px;
  align-items: center;
  gap: var(--oai-space-4);
  padding: var(--oai-space-4) var(--oai-space-3);
  border: 0;
  border-top: 1px solid var(--ngs-border);
  color: var(--ngs-text);
  background: var(--ngs-surface);
  text-align: left;
  cursor: pointer;
}
.row:hover {
  background: var(--ngs-surface-hover);
}
.identity {
  display: grid;
  min-width: 0;
  gap: var(--oai-space-1);
}
.identity strong {
  font-size: var(--ngs-font-md);
  font-weight: var(--ngs-weight-semibold);
  overflow-wrap: anywhere;
}
.identity code {
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-xs);
  overflow-wrap: anywhere;
}
.facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--oai-space-2);
}
.state {
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-xs);
}
.note,
.notice {
  margin-top: var(--oai-space-4);
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-sm);
}
.notice {
  padding: var(--oai-space-6);
  border: 1px solid var(--ngs-border);
  border-radius: var(--ngs-radius-md);
  background: var(--ngs-surface);
}
.dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ngs-border);
  border-radius: var(--ngs-radius-lg);
  color: var(--ngs-text);
  background: var(--ngs-surface-opaque);
  box-shadow: var(--ngs-shadow-dialog);
}
.dialog::backdrop {
  background: var(--ngs-backdrop);
}
.dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--oai-space-4);
  padding: var(--oai-space-6) var(--oai-space-6) var(--oai-space-3);
}
.dialog header > div {
  display: grid;
  min-width: 0;
  gap: var(--oai-space-1);
}
.dialog header code {
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-xs);
  overflow-wrap: anywhere;
}
.dialog h3 {
  font-size: var(--ngs-font-title);
}
.dialog > p {
  padding: 0 var(--oai-space-6) var(--oai-space-5);
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-sm);
}
.dialog dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--oai-space-2) var(--oai-space-4);
  margin: 0;
  padding: var(--oai-space-5) var(--oai-space-6);
  border-top: 1px solid var(--ngs-border);
  font-size: var(--ngs-font-sm);
}
.dialog dt {
  color: var(--ngs-text-muted);
}
.dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.dialog small {
  display: block;
  padding: 0 var(--oai-space-6) var(--oai-space-6);
  color: var(--ngs-text-muted);
  font-size: var(--ngs-font-xs);
}
@container ngs-compute (max-width: 620px) {
  .row {
    grid-template-areas: "identity chevron" "facts state";
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .identity {
    grid-area: identity;
  }
  .facts {
    grid-area: facts;
  }
  .state {
    grid-area: state;
    justify-self: end;
  }
  .row > span:last-child {
    grid-area: chevron;
    justify-self: end;
  }
}
@media (max-width: 480px) {
  .dialog dl {
    grid-template-columns: 1fr;
  }
}