/* Tables: quiet rows, small grey headers, right-aligned numbers. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  table { width: 100%; border-collapse: collapse; margin-block: var(--space-2) var(--space-4); font-size: var(--text-sm); }
  th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--line); }
  th { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: color-mix(in srgb, var(--solid) 40%, transparent); }

  /* Sortable headings look exactly like plain ones (an unmarked extra); the outline only
     shows for keyboard users. */
  .sort-heading { all: unset; cursor: default; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
  .sort-heading:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

  .table--compact { width: auto; }
  .table--compact th, .table--compact td { padding: var(--space-1) var(--space-2); }

  .breakdown .total td { font-weight: var(--weight-medium); border-top: 1px solid var(--line); }

  .steps-table input[type=text] { width: 100%; min-width: 10rem; }
  .steps-table td { vertical-align: middle; }
  .steps-table form.button_to { display: inline-flex; }

  .size-matrix { width: auto; }
  .size-matrix th, .size-matrix td { text-align: center; min-width: 3.25rem; }
  /* Room for four digits (shops order 100s of a size): wider, and without the browser's
     up/down arrows, which ate half the box. Typing and the arrow keys still work. */
  .size-matrix input.qty { width: 4.5rem; text-align: center; padding-inline: .35rem; appearance: textfield; -moz-appearance: textfield; }
  .size-matrix input.qty::-webkit-inner-spin-button, .size-matrix input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  .price-grid { width: auto; }
  .price-grid input.money { width: 4.75rem; text-align: right; }
  .price-grid input.qty { width: 3.75rem; }
  .price-grid th input { font-weight: var(--weight-regular); text-transform: none; }
  .price-grid th input[placeholder="Name"] { width: 8.5rem; }
}