/* Shared spreadsheet and read-only table kit. Routes only place and size columns. */
.data-grid-scroll { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--input-line) transparent; }
.data-grid { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--text-dense)/var(--line-body) var(--sans); text-align: left; }
.data-grid > thead > tr > th { position: sticky; top: 0; z-index: 2; height: var(--row-height); padding: var(--cell-padding-y) var(--cell-padding-x); border-bottom: 0; box-shadow: inset 0 -1px var(--line); background: var(--table-header); color: var(--muted); font-size: var(--text-meta); line-height: var(--line-meta); font-weight: 600; text-align: left; white-space: nowrap; }
.data-grid__row > :is(th, td) { height: var(--row-height); padding: var(--cell-padding-y) var(--cell-padding-x); border-bottom: 0; box-shadow: inset 0 -1px var(--line-soft); border-radius: 0; background: var(--surface); vertical-align: middle; text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-grid__row:last-child > :is(th, td) { box-shadow: none; }
.data-grid__row:hover > :is(th, td), .data-grid__row:focus-within > :is(th, td) { background-color: var(--band); }
.data-grid :is(th, td).data-grid__identity { position: sticky; left: 0; z-index: 1; }
.data-grid > thead > tr > .data-grid__identity { z-index: 3; }
.data-grid :is(th, td).data-grid__actions { position: sticky; left: auto; right: 0; z-index: 2; padding: 0; border-left: 1px solid var(--line-soft); background: var(--surface); text-align: right; overflow: visible; }
.data-grid > thead > tr > .data-grid__actions { z-index: 4; background: var(--table-header); }
.data-grid > thead > .data-grid__band > th { height: 28px; padding: 4px var(--cell-padding-x); line-height: var(--line-meta); }
.data-grid .data-grid__actions[data-menu-open="true"] { z-index: 5; }
.data-grid__row > .data-grid__control { padding-block: 0; }
.data-grid__row > .data-grid__editable { position: relative; padding: 0; }
.data-grid > thead > tr > .data-grid__editable { padding: 0; }
.data-grid .data-grid__heading-control { justify-content: flex-start; width: 100%; min-width: var(--control-height); min-height: var(--control-height); height: var(--row-height); padding: var(--cell-padding-y) var(--cell-padding-x); border: 0; border-radius: 0; color: inherit; font-size: var(--text-meta); line-height: var(--line-meta); font-weight: 600; text-align: left; }
.data-grid .data-grid__heading-control[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }
.grid-input { display: block; width: 100%; min-width: 0; min-height: var(--control-height); height: var(--row-height); padding: var(--cell-padding-y) var(--cell-padding-x); border: 1px solid transparent; border-radius: 0; background-color: transparent; color: var(--ink); font: 400 var(--text-dense)/var(--line-body) var(--sans); text-overflow: ellipsis; transition: background-color 120ms ease; }
.grid-input:not(:disabled):not([aria-invalid="true"]):hover { background-color: var(--band); }
.grid-input:focus { position: relative; z-index: 1; background-color: var(--surface); outline: 2px solid var(--focus-ring); outline-offset: -1px; box-shadow: none; text-overflow: clip; }
.grid-input[aria-invalid="true"] { border-color: var(--red); background-color: var(--red-wash); }
.grid-input[aria-invalid="true"]:focus { outline-color: var(--red); }
.grid-input:disabled { opacity: 1; color: var(--muted); cursor: not-allowed; }
.grid-input[readonly] { color: var(--muted); }
.grid-input::placeholder { color: var(--muted); }
.grid-input:is([type="date"], [type="number"]) { font-variant-numeric: tabular-nums; }
.grid-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.grid-input::-webkit-inner-spin-button, .grid-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.grid-input[type="checkbox"] { width: 16px; min-height: 16px; height: 16px; margin: 12px auto; padding: 0; accent-color: var(--accent); }
.grid-input[data-client-draft="true"] { border-bottom-color: var(--accent); }
@media (max-width: 760px) {
  .data-grid :is(th, td).data-grid__identity { position: static; }
}
.data-grid__content { display: flex; align-items: center; gap: 8px; min-width: 0; }
.data-grid__content > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.data-grid__content > :first-child { flex: 1 1 auto; }
.data-grid__content > small { flex: 1 1 45%; color: var(--muted); font-size: var(--text-meta); line-height: var(--line-meta); }

/* A native 16px checkbox sits inside the same 36/44px editable cell target. */
.grid-checkbox { display: flex; justify-content: center; width: 100%; min-height: var(--row-height); }
.grid-checkbox > .grid-input[type="checkbox"] { margin: 0; }