/*
 * .detail-list — a compact key/value grid for read-only detail pages (a talk's
 * facts, an import's result stats). Render as <dl class="detail-list"> with each
 * pair wrapped in a <div> (dt = label, dd = value); the wrapper uses
 * display:contents so labels form one column and values another. Falls back to a
 * single stacked column on narrow viewports.
 */
@layer components {
  .detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: calc(var(--u-pad) / 2) calc(var(--u-pad) * 1.5);
    align-items: baseline;
    margin: 0;
  }

  .detail-list > div { display: contents; }

  .detail-list dt {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    color: var(--ink-muted);
  }

  .detail-list dd {
    margin: 0;
    color: var(--ink);
  }

  /* Stack label-over-value when there isn't room for two columns. */
  @media (max-width: 34rem) {
    .detail-list { grid-template-columns: 1fr; gap: calc(var(--u-pad) / 4); }
    .detail-list > div { display: block; margin-block-end: calc(var(--u-pad) / 2); }
  }
}