@layer components {
  .table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-small);

    th, td {
      padding: var(--block-space-half) var(--inline-space-half);
      text-align: start;
      vertical-align: top;
      border-block-end: 1px solid var(--color-ink-lightest);
    }

    th {
      font-weight: 600;
      color: var(--color-ink);
    }

    td {
      color: var(--color-ink-darker);
      overflow-wrap: break-word;
      word-break: break-word;
    }
  }

  .table--striped {
    tbody tr:nth-child(odd) {
      background-color: oklch(var(--lch-ink-lightest) / 50%);
    }
  }

  .table--hover {
    tbody tr:hover {
      background-color: var(--color-ink-lightest);
    }
  }

  .table__header {
    background-color: var(--color-ink-darkest);
    color: var(--color-ink-inverted);

    th {
      border: none;
      color: var(--color-ink-inverted);
    }
  }

  /* Dimmed row */
  .table tbody tr.row-dimmed {
    opacity: 0.25;
  }

  /* Admin tables — used inside record-table body */
  .admin-table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-x-small);

    th, td {
      padding: 0.5em var(--inline-space);
      text-align: start;
      vertical-align: middle;
    }

    thead th {
      font-weight: 600;
      color: var(--color-ink-medium);
      text-transform: uppercase;
      font-size: var(--text-xx-small);
      letter-spacing: 0.03em;
      background: color-mix(in srgb, var(--color-ink-lightest) 50%, var(--color-canvas));
      border-block-end: 1px solid color-mix(in srgb, var(--color-ink-lighter) 50%, transparent);
    }

    tbody tr {
      border-block-end: 1px solid color-mix(in srgb, var(--color-ink-lighter) 50%, transparent);
    }

    tbody tr:last-child {
      border-block-end: none;
    }

    tbody tr:hover {
      background: color-mix(in srgb, var(--color-link) 3%, transparent);
    }
  }

  /* Admin info table — label/value pairs in show pages */
  .admin-info-table {
    inline-size: 100%;
    border-collapse: collapse;

    th, td {
      padding: 0.5em var(--inline-space);
      text-align: start;
      vertical-align: top;
      font-size: var(--text-x-small);
    }

    th {
      width: 12em;
      color: var(--color-ink-medium);
      font-weight: 500;
    }

    tr {
      border-block-end: 1px solid color-mix(in srgb, var(--color-ink-lighter) 50%, transparent);
    }

    tr:last-child {
      border-block-end: none;
    }
  }

  /* Compact search form inside admin index headers */
  .admin-search__input {
    inline-size: 20em;
    font-size: var(--text-x-small);
    padding-block: 0.25em;
  }

  .admin-search__btn {
    --btn-padding: 0 0.25em;
    font-size: var(--text-x-small);
    line-height: 1;
  }

  /* Personas index — identity group header + indented persona rows */
  .admin-personas__group-header td {
    background: color-mix(in srgb, var(--color-ink-lighter) 25%, transparent);
    border-block-start: 2px solid var(--color-ink-lighter);
    padding-block: 0.5em;
  }

  .admin-personas__child td:first-child {
    padding-inline-start: 1.5em;
    position: relative;
  }

  .admin-personas__child td:first-child::before {
    content: "›";
    color: var(--color-ink-lighter);
    position: absolute;
    inset-inline-start: 0.5em;
  }
}