/* 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); }

  .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; }
  .size-matrix input.qty { width: 3.5rem; text-align: center; }

  .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; }
}