/* Observation collection, grouped listings, and deferred detail presentation. */
.observation-details { display: grid; gap: var(--space-5); margin: 0; }
.observation-details div { display: grid; grid-template-columns: minmax(8rem, 0.7fr) 1fr; gap: var(--space-5); }
.observation-details dt { color: var(--color-text-faint); font-size: var(--font-size-sm); font-weight: 750; }
.observation-details dd { margin: 0; color: var(--color-heading); }
.data-table[data-wide="observations"] {
  min-width: 36rem;
}

@scope (.data-table[data-wide="observations"]) {
  th,
  td {
    padding: var(--space-5) var(--space-4);
    font-size: var(--font-size-md);
    text-align: right;
    white-space: nowrap;
  }

  th {
    background: color-mix(in srgb, var(--color-surface-muted), transparent 28%);
    font-size: var(--font-size-xs);
  }

  :is(th, td):first-child {
    padding-left: var(--space-9);
    text-align: left;
  }

  :is(th, td):nth-child(2) {
    text-align: left;
  }

  td[data-dialog-action] > [data-controller="dialog"] > .button {
    min-height: auto;
    padding: var(--space-2) var(--space-4);
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  :is(th, td):last-child {
    padding-right: var(--space-9);
  }
}