@layer components {
  .table-wrap { overflow-x: auto; container-type: inline-size; }

  /* Frozen panes: the table scrolls inside its block, the header row sticks to
     the top, the first and last columns stick to the sides, like Excel. */
  .table-wrap--frozen { overflow: auto; max-height: calc(100dvh - 14rem); }

  .table {
    width: 100%;
    font-size: var(--text-base);

    & th {
      text-align: left;
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-ink-muted);
      padding: 0.625rem 1rem;
      background: var(--color-surface-raised);
      border-bottom: 1px solid var(--color-line);
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    & tbody tr { --row-bg: var(--color-surface); }
    & tbody tr:nth-child(even) { --row-bg: var(--color-zebra); }
    & tbody tr:hover { --row-bg: color-mix(in oklab, var(--color-accent), var(--color-surface) 94%); }
    & td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line); vertical-align: middle; background: var(--row-bg); }
    & tbody tr:last-child td { border-bottom: 0; }

    & .table__actions, & .table__toggle { position: sticky; z-index: 1; }
    & .table__actions { right: 0; box-shadow: -14px 0 16px -12px oklch(0% 0 0 / 0.5); }
    & .table__toggle { left: 0; box-shadow: 14px 0 16px -12px oklch(0% 0 0 / 0.3); }
    & th.table__actions, & th.table__toggle { z-index: 3; }
  }

  .table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .table__name { font-weight: 700; }
  .table__sub { color: var(--color-ink-muted); font-size: var(--text-sm); margin-top: 2px; }
  .table__actions { text-align: right; white-space: nowrap; & .btn + .btn, & .btn + form, & form + .btn { margin-left: 0.25rem; } }
  .table--dense { font-size: var(--text-sm); & td { padding: 0.5rem 0.75rem; } & th { padding: 0.5rem 0.75rem; } }

  /* Expandable rows: a chevron button opens a detail row under the line. */
  .table__toggle { width: 2.5rem; padding-right: 0; }
  .table__toggle .btn svg { transition: rotate var(--duration) var(--ease); }
  .table__toggle .btn.is-open svg { rotate: 90deg; }
  .table__details td { padding: 0; background: var(--color-surface-raised) !important; }
  /* The detail is as wide as the scroll container and sticks to its left edge, so a wide table does not push it away. */
  .table__details > td > turbo-frame { display: block; box-sizing: border-box; width: 100cqw; position: sticky; left: 0; padding: var(--block-space) var(--block-space-l); }
  .table__clamp { display: block; max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table__main { min-width: 14rem; }

  .chat { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-muted); & svg { width: 16px; height: 16px; } }
  .chat--unread { color: var(--color-accent); }
  .chat--none { color: var(--color-line-strong); }
}