/* Spec table — M06.
 *
 * Two columns of name and value, separated by hairlines and nothing else. No
 * zebra striping, no cell borders: the rule is the divider in this system, and
 * a shaded row would be decoration pretending to be structure.
 */

/* The spec asks for a sticky header row. A <dl> has no header row, so what
 * sticks is the module's heading — which is the thing you actually lose track
 * of when scrolling thirty specifications. */
/* DR-01: the heading that sticks is navy, and where it meets the navy masthead
 * the two bands would fuse into one block. A paper hairline above it keeps the
 * boundary readable — the decision record's own solution, applied to the
 * element that actually sticks here. This is a <dl>, not a table: these are
 * name/value pairs, so there is no header row to invert. */
.pl-spec__title {
  position: sticky;
  top: var(--masthead-h);
  z-index: 1;
  background: var(--c-surface-inv);
  color: var(--pl-paper);
  border-top: var(--rule) solid var(--pl-paper);
  padding-inline: var(--sp-2);
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  padding-block: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: var(--rule) solid var(--c-rule);
}

.pl-spec__list {
  border-top: var(--rule) solid var(--c-rule);
  max-width: 52rem;
}

.pl-spec__row {
  display: grid;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: var(--rule) solid var(--c-rule);
}

@media (min-width: 48rem) {
  .pl-spec__row {
    /* A fixed name column is what lets the values line up as a column of
     * figures rather than ragged text. */
    grid-template-columns: 16rem 1fr;
    align-items: baseline;
  }
}

.pl-spec__label {
  color: var(--c-text-muted);
}

.pl-spec__value {
  margin: 0;
  font-size: 0.9375rem;
}