// A plain table on the page: hairline rows, a grey hover and a quiet ⋯ menu. In a narrow column each row
// stacks into a short card and each cell shows its column name from data-label.
export const tbl = {
  table: "w-full border-separate border-spacing-0 text-left text-[14px] text-body @max-[640px]/pd:block",
  head: "@max-[640px]/pd:hidden",
  th: "h-10 px-2 align-middle text-[13px] font-normal whitespace-nowrap text-muted shadow-[inset_0_-1px_0_var(--color-hairline)]",
  body: "@max-[640px]/pd:block",
  row: "group transition-colors duration-150 hover:bg-[#fafafa] @max-[640px]/pd:relative @max-[640px]/pd:block @max-[640px]/pd:py-2.5 @max-[640px]/pd:pr-9 @max-[640px]/pd:shadow-[inset_0_-1px_0_var(--color-hairline)]",
  clickable: "cursor-pointer",
  /** The first cell, which names the row: no label on a phone. */
  lead: "h-14 px-2 py-2.5 align-middle shadow-[inset_0_-1px_0_var(--color-hairline)] @max-[640px]/pd:block @max-[640px]/pd:h-auto @max-[640px]/pd:px-0 @max-[640px]/pd:py-1 @max-[640px]/pd:shadow-none",
  td: "h-14 px-2 py-2.5 align-middle shadow-[inset_0_-1px_0_var(--color-hairline)] @max-[640px]/pd:flex @max-[640px]/pd:h-auto @max-[640px]/pd:items-start @max-[640px]/pd:justify-between @max-[640px]/pd:gap-4 @max-[640px]/pd:px-0 @max-[640px]/pd:py-1 @max-[640px]/pd:text-right @max-[640px]/pd:shadow-none @max-[640px]/pd:before:shrink-0 @max-[640px]/pd:before:text-left @max-[640px]/pd:before:text-[12.5px] @max-[640px]/pd:before:text-muted @max-[640px]/pd:before:content-[attr(data-label)]",
  menu: "w-10 px-1 align-middle shadow-[inset_0_-1px_0_var(--color-hairline)] @max-[640px]/pd:absolute @max-[640px]/pd:top-2 @max-[640px]/pd:right-0 @max-[640px]/pd:w-auto @max-[640px]/pd:p-0 @max-[640px]/pd:shadow-none",
  sub: "block text-[12.5px] leading-[18px] text-muted",
  /** The name of the row as a link or button: the keyboard's way in. */
  name: "cursor-pointer rounded-sm border-0 bg-transparent p-0 text-left font-sans text-[14px] font-medium text-ink no-underline outline-none hover:underline hover:decoration-line hover:underline-offset-4 focus-visible:shadow-[0_0_0_2px_var(--color-brand)]",
};