/*
 * A section of a page — a keystats panel, the key financials, the commentary
 * excerpt. The class is still `.card` (forty-odd templates use it), but there
 * is no box any more (tasks/redesign, D2): a heavy ink rule on top, the
 * heading row under it, the content on the paper. Never a section inside a
 * section.
 *
 *   .card__header   title on the left, a note, a key or a link on the right
 *   .card--flush    no space under the heading row, for a table that starts
 *                   right under it
 */
@layer components {
  .card {
    padding-block: var(--space-xs) var(--space-lg);
    border-block-start: var(--rule-heavy);
  }

  /* The title keeps whatever sits beside it — a lock, a key, a link — on its
     own line, and wraps itself instead. */
  .card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-md);
    margin-block-end: var(--space-xs);

    & > .heading {
      min-inline-size: 0;
      margin-block-end: 0;
    }

    /* A heading carrying its own note takes the row, so the note sits at the
       row's end on the heading's baseline. */
    & > .heading:has(> .heading__note) {
      flex: 1;
    }
  }

  .card--flush {
    padding-block-end: 0;

    & > .card__header {
      margin-block-end: var(--space-2xs);
    }

    & > .table-legend {
      margin: 0;
      padding-block: var(--space-xs) var(--space-sm);
    }
  }
}