.order-table {
  --row-grip-inset: calc(var(--focus-clearance) + 1px);
  --row-grip-gutter: calc(var(--row-grip-inset) + var(--grip-width) + var(--cell-padding-x));
}
/* Reserve the same space for the grip in both read and edit states. The 1px
   border belongs to each layer, so its text starts at the authored gutter. */
#order-sheet .sheet-cell:has(> .row-drag-handle) > :is(.grid-cell__read, .sheet-input),
#order-sheet .sheet-cell:has(> .row-drag-handle) > .cell-name > .sheet-input { padding-left: calc(var(--row-grip-gutter) - 1px); }
.order-table:has(.row-drag-handle) .data-grid__identity .column-heading-button { padding-left: calc(var(--row-grip-gutter) - 2 * var(--cell-padding-x)); }
.row-drag-handle {
  position: absolute;
  z-index: 2;
  left: var(--row-grip-inset);
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}
.row-drag-handle:active { cursor: grabbing; }
.sheet-row-actions > .row-drag-handle { position: static; flex-shrink: 0; transform: none; }
/* Pinned cells stay opaque so scrolled data cannot show through while dragging. */
.order-table .row-is-dragging > td:not(.data-grid__actions, .data-grid__identity) { opacity: .55; }
.order-table .row-drop-before > td { box-shadow: inset 0 3px var(--accent); }
.order-table .row-drop-after > td { box-shadow: inset 0 -3px var(--accent); }
.order-table .row-drop-before > td:first-child::before,
.order-table .row-drop-after > td:first-child::after {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--accent);
  content: "";
}
.order-table .row-drop-before > td:first-child::before { top: -2px; }
.order-table .row-drop-after > td:first-child::after { bottom: -2px; }
@media (max-width: 760px) {
  .order-table .sheet-cell:has(> .row-drag-handle) { position: relative; }
}

@media (hover: hover) and (pointer: fine) {
  #order-sheet input[type="date"].sheet-input:not(:hover):not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus) { -moz-appearance: textfield; }
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus)::-webkit-inner-spin-button,
  #order-sheet input[type="number"].sheet-input:not(:hover):not(:focus)::-webkit-outer-spin-button { opacity: 0; }
}

#order-sheet .sheet-cell--actions,
#order-sheet .sheet-actions-heading { width: 100px; min-width: 100px; max-width: 100px; }
#order-sheet .sheet-row-actions { gap: 0; padding: 2px; }
#order-sheet .sheet-cell--actions:has(.row-drag-handle) { width: 116px; min-width: 116px; max-width: 116px; }

@media (max-width: 760px), (pointer: coarse) {
  #order-sheet .sheet-cell--actions,
  #order-sheet .sheet-actions-heading { width: 96px; min-width: 96px; max-width: 96px; }
  #order-sheet .sheet-row-actions { padding: 0; }
  #order-sheet .sheet-cell--actions:has(.row-drag-handle) { width: 140px; min-width: 140px; max-width: 140px; }
}