/* Defaults: any rule directly in ed-utilities wins (nested layer);
   :where() keeps them at zero specificity as a safety net. */
@layer ed-utilities.defaults {
  [class*='ed-pairs'] > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where([class*='ed-pairs']) {
    gap: var(--ed-space-4) var(--ed-space-6);
  }
}

@layer ed-utilities {
  [class*='ed-pairs'] {
    display: grid;

    & dt {
      color: var(--ed-color-label);
      font-size: var(--ed-font-size-s);
      font-weight: var(--ed-font-weight-normal);
    }

    & dd {
      color: var(--ed-color-text);
      font-weight: var(--ed-font-weight-medium);

      /* Amounts under one another line up on the decimal point. Right-aligning
         them would do the same and break the vertical line the values form. */
      font-variant-numeric: tabular-nums;
    }
  }

  /*
    Stacked. Each pair is a `dl > div` holding one dt and one dd, so the div is the grid cell and
    the pair stacks inside it — dt and dd as direct children would land in cells of their own,
    putting a label beside the previous value.

    The column count follows from the minimum column size rather than being set as a number: equal
    section widths and one inherited minimum yield the same count in every section, so the labels
    and values stay on continuous vertical lines down a page, and every section reduces its columns
    together when the viewport narrows. Declaring the count instead would make each section able to
    carry its own.

    Unlike --ed-grid-min-column-size, this property is deliberately not reset to `initial` here:
    inheritance is what lets one declaration on a page container reach every section below it.
  */
  .ed-pairs {
    /* auto-fill, not auto-fit: auto-fit collapses the tracks a short section does not fill, and
       its remaining pairs then stretch across the full width — measured at 2 pairs in a 3-column
       grid, whose value columns moved from 169px/491px to 169px/652px. The empty trailing cells
       are what holds the columns in place for the sections below.

       The minimum is floored at 50%, not 100%: a pair spanning two tracks keeps a second track
       alive however narrow the container gets, and at a 100% floor those two minimums exceeded the
       container — measured as 11px of overflow at 300px and 61px at 240px. Half the container is
       the widest minimum at which two tracks still fit.

       Exactly 50%, not 50% minus the gap. Subtracting the gap would close the last few pixels a
       spanned pair still overhangs at around 260px, but it also drops the minimum far enough that
       two tracks fit where one should be: measured, a block with no spanned pair stopped collapsing
       to a single column. Column count is the contract, the few pixels are not. */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--ed-pairs-min-column-size, 14rem), 50%), 1fr));
  }

  .ed-pairs {
    /* Reset so the span stays a per-pair decision: set on a page container it would inherit into
       every pair at once, which is never what a single long value needs. The count above is the
       opposite case — there inheritance is the mechanism. */
    --ed-pairs-span: initial;
  }

  .ed-pairs > * {
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-1);

    /* A value too long for one column takes two rather than wrapping to a second line. Where
       several values on a page would need it, the minimum column size is too small. */
    grid-column: span var(--ed-pairs-span, 1);
  }

  /*
    Inline. dt and dd flow straight into the two columns, so this form needs no wrapper. The label
    column takes the width of the widest label and is right-aligned within it, which puts every
    label next to its value and leaves the values on one line — a ragged label column staggers
    them, and a staggered column of values has no line for the eye to follow.
  */
  .ed-pairs-inline {
    grid-template-columns: auto 1fr;
    row-gap: var(--ed-space-2);
  }

  .ed-pairs-inline dt {
    text-align: end;
  }
}