/*
 * DD-09 Key-value details list — app/components/ui/details_list_component.rb
 *
 * <dl> grid of <div class="ui-details-list__item"> wrappers (valid HTML5 —
 * a <dl> may contain <div>s each holding one <dt>/<dd> pair), so the
 * items can lay out as a real CSS grid without the parent needing to
 * count how many dt/dd pairs precede any given row.
 *
 * 2-column switch is a container query, not a viewport media query (same
 * "one partial, two renderings" lesson as table.css): this component gets
 * dropped into narrow sidebar columns (e.g. B2's SplitPanelComponent
 * side_a) on wide desktop viewports, where a >=768px viewport query used
 * to force 2 columns onto a ~250px-wide card and wrap every value.
 */

.ui-details-list {
  container-type: inline-size;
  container-name: ui-details-list;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

@container ui-details-list (min-width: 480px) {
  .ui-details-list {
    grid-template-columns: 1fr 1fr;
  }
}

.ui-details-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-details-list__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: 0;
}

.ui-details-list__value {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.ui-details-list__value--masked {
  font-variant-numeric: var(--numeric-tabular);
}

/* Inline variant — label left, value right, same row */
.ui-details-list--inline .ui-details-list__item {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}