@layer components.blocks {
  .table-wrapper {
    /* The header treatment. Ink by default: a standalone wrapper is a
       citable object. Position overrides these — nothing is authored. */
    --table-header-fg: var(--color-text-inverse);
    --table-header-bg: var(--color-surface-inverse);
    --table-header-rule: 0;
    --table-header-edge: var(--color-border-normal);

    @mixin my var(--space-10);

    counter-increment: tbl;

    & figcaption {
      @mixin typo_label;
      @mixin mb var(--size-3);
      display: flex;
      gap: var(--size-5);
      color: var(--color-text-secondary);

      &::before {
        content: "Table " counter(tbl, upper-roman) " ⟫";
        font-weight: var(--font-weight-emphasis);
        color: var(--color-text-primary);
        white-space: nowrap;
      }
    }

    & table {
      @mixin my var(--size-0);

      & thead {
        & th {
          border-block-end: var(--table-header-rule);
          color: var(--table-header-fg);
          background-color: var(--table-header-bg);
        }
      }

      & td {
        &.text {
          font-family: var(--font-body);
          font-size: 1.077em;
          line-height: 1.55;
          color: var(--color-text-secondary);
          text-wrap: pretty;
        }
      }
    }

    & .num {
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    & .key {
      font-weight: var(--font-weight-emphasis);
    }
  }

  /* Underline header: a table introduced by a heading, or one inside a
     block, is part of the argument rather than a reference. A block with
     its own surface redeclares --table-header-bg so the sticky first
     column on mobile paints the right colour. */

  .prose :is(h2, h3, h4) + .table-wrapper,
  :is(.callout, .reveal) .table-wrapper {
    --table-header-fg: inherit;
    --table-header-bg: var(--color-surface-base);
    --table-header-rule: var(--border-card) solid var(--color-border-strong);
    --table-header-edge: var(--color-border-strong);
  }

  /* === MATRIX ===
     A correspondence table: the cells carry hits, not values, so it has to
     read as a grid — rules on both axes, everything centred, and a miss
     stated rather than left looking like an oversight. */

  .table-wrapper--matrix {
    & :is(th, td) {
      @mixin px var(--space-4);
      @mixin border-r var(--border-hairline), solid, var(--color-border-subtle);

      text-align: center;
      vertical-align: middle;
    }

    & :is(th, td):last-child {
      border-inline-end: 0;
    }

    /* The first column is the subject; it keeps its reading direction. */
    & :is(thead, tbody) :is(th, td):first-child {
      @mixin border-r var(--border-card), solid, var(--color-border-strong);
      text-align: left;
    }

    /* Axis labels are short. Let them wrap instead of widening a column. */
    & thead th {
      text-wrap: balance;
    }

    /* A hit: the cell itself is the mark. */
    & tbody td.is-set {
      background-color: var(--color-text-primary);
    }

    /* A miss, said out loud. */
    & tbody td:empty::before {
      content: "·";
      color: var(--color-text-quiet);
    }
  }

  @media (--bp-mobile) {
    .table-wrapper .table-scroll thead th:first-child {
      border-inline-end-color: var(--table-header-edge);
    }
  }
}