div.table {
  color: var(--text-secondary);

  /** Desktop pulls the row dividers in to the cells' horizontal padding; mobile's span the row. */
  --divider-inset: 0px;

  .column-picker {
    display: flex;
    margin: 0 0 var(--fx-m-16);
    padding: 0;
    border: 0;

    label {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--fx-m-8);
      min-height: 48px;
      padding: var(--fx-p-12) var(--fx-p-16);
      border: 1px solid var(--border-default);
      border-left-width: 0;
      cursor: pointer;
      user-select: none;

      /** Rounded per segment rather than clipped by the group, which eats the end borders. */
      &:first-of-type {
        border-left-width: 1px;
        border-radius: 12px 0 0 12px;
      }

      &:last-of-type {
        border-radius: 0 12px 12px 0;
      }

      &:has(input:checked) {
        color: var(--text-inverse);
        background-color: var(--bg-strong);
        border-color: var(--bg-strong);
      }

      &:has(input:focus-visible) {
        outline: 2px solid var(--border-emphasis);
        outline-offset: -2px;
      }
    }
  }

  .frame {
    border-radius: 16px;
    padding: var(--fx-p-16);
    overflow: clip;
  }

  &.bordered .frame {
    border: 1px solid var(--border-default);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    display: block;
  }

  /** The picker names the columns on mobile, so the header row itself has nothing left to do. */
  thead {
    display: none;
  }

  tbody,
  tr,
  th,
  td {
    display: block;
    text-align: left;
  }

  th {
    font-weight: inherit;
  }

  tbody tr:not(.focus, .informative, .highlight) th {
    color: var(--text-tertiary);
  }

  td {
    margin-top: var(--fx-m-4);
  }

  tbody tr + tr {
    margin-top: var(--fx-m-12);
    padding-top: var(--fx-p-12);
  }

  /** A background line rather than a border, which would always span the row's full width. */
  tbody :not(.focus, .informative, .highlight)
    + tr:not(.focus, .informative, .highlight) {
    background:
      linear-gradient(var(--border-subtle) 0 0) no-repeat top center /
      calc(100% - 2 * var(--divider-inset)) 1px;
  }

  tbody tr.focus {
    color: var(--text-inverse);
    background-color: var(--bg-strong);
  }

  tbody tr.informative {
    background-color: var(--bg-status-informative);
    color: var(--text-primary);
  }

  tbody tr.highlight {
    background-color: var(--bg-subtle);
  }

  @media (width < 768px) {
    tbody tr:is(.focus, .informative, .highlight) {
      margin: var(--fx-m-12) calc(-1 * var(--fx-p-16)) 0;
      padding: var(--fx-p-16);
    }

    /** Consecutive bands read as one block, with no page showing between them. */
    tbody :is(.focus, .informative, .highlight)
      + tr:is(.focus, .informative, .highlight) {
      margin-top: 0;
    }

    tbody tr:is(.focus, .informative, .highlight):first-child {
      margin-top: calc(-1 * var(--fx-p-16));
    }

    tbody tr:is(.focus, .informative, .highlight):last-child {
      margin-bottom: calc(-1 * var(--fx-p-16));
    }

    /**
     * Only the column picked stays visible. Tables without a picker have a single result
     * column, which always shows.
     *
     * ponytail: one rule per column, up to four. Add more if a table ever needs them.
     */
    &:has(.column-picker) [data-column] {
      display: none;
    }

    &:has(.column-picker input[value="1"]:checked) [data-column="1"],
    &:has(.column-picker input[value="2"]:checked) [data-column="2"],
    &:has(.column-picker input[value="3"]:checked) [data-column="3"],
    &:has(.column-picker input[value="4"]:checked) [data-column="4"] {
      display: block;
    }
  }

  @media (width >= 768px) {
    --divider-inset: var(--fx-p-24);

    .column-picker {
      display: none;
    }

    .frame {
      border-radius: 24px;
      padding: 0;
    }

    /** The filled header reaches the frame's edge, so its own top border would double up. */
    &.bordered .frame:has(thead) {
      border-top: 0;
    }

    thead {
      display: table-header-group;
      color: var(--text-inverse);
      background-color: var(--bg-strong);
    }

    table {
      display: table;
    }

    tbody {
      display: table-row-group;
    }

    tr {
      display: table-row;
    }

    th,
    td {
      display: table-cell;
      padding: var(--fx-p-16) var(--fx-p-12);
      vertical-align: top;
    }

    tr > *:first-child {
      padding-left: var(--fx-p-24);
      min-width: 200px;
    }

    tr > *:last-child {
      padding-right: var(--fx-p-24);
    }

    /** Unnamed columns are a key and its value, so the value hugs the opposite edge. */
    table:not(:has(thead)) tr > *:last-child {
      text-align: right;
    }

    /**
     * Figma's result width, with a floor under the label column so three result columns
     * shrink instead of squeezing the labels to one word per line. Unnamed columns hold
     * prose of no set length, so they size to their content instead.
     */
    table:has(thead) [data-column] {
      width: 211px;
    }
  }
}