/* The CRM record sheet: attributes down one column, the unified timeline down
   the other. The label voice its headings speak lives in labels.css. */
@layer components {
  .record-layout {
    display: grid;
    gap: var(--block-space-double);

    /* The container, not the viewport: #main narrows when the notification
       panel opens, and a two-column record sheet in a 460px column is the
       thing this breakpoint exists to prevent.

       Nested, not a sibling block: `gap` above is a shorthand that also sets
       column-gap, so a rule setting only column-gap has to stay after it.
       Split across two files with this landing in the alphabetically earlier
       one, the shorthand silently won and the timeline column shifted. */
    @container main (min-width: 70ch) {
      grid-template-columns: 30ch 1fr;
      align-items: start;
      column-gap: calc(var(--inline-space-double) * 2);
    }
  }

  /* Grid items floor at min-width auto, so one long email address or an
     unbroken URL in the timeline would push the other column off the sheet. */
  .record-layout__attributes,
  .record-layout__timeline {
    min-inline-size: 0;
  }

  /* The whole label voice for dt lives on `.attributes > dt` in labels.css —
     restating the tracking and caps here would only invite the two registers to
     drift. Only the between-attribute rhythm belongs to this surface. */
  .record-layout .attributes dd {
    margin-block-end: var(--block-space);
  }

  /* Relations and pipelines are a different kind of fact from the record's own
     attributes; one hairline is the whole of saying so. */
  .record-layout__attributes section {
    border-block-start: var(--border);
    padding-block-start: var(--block-space);
  }
}