/* Grid — an editable worksheet in the look of Excel 2000 (INVENTORY L11; extension, knowledge). Built by
   js/components/grid.js: a client edge around a scroll area; the column headings and row numbers stay in view. */
.w2k-grid {
  --grid-row-height: 17px;          /* 12.75 pt, Excel's default row */
  --grid-rowhead-width: 26px;
  padding: var(--metric-table-edge);   /* inside the client edge: the header and rows start here */
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
  color: var(--sys-window-text);
  font: var(--font-ui);
  outline: none;
  user-select: none;
}
.w2k-grid[data-norowheaders] { --grid-rowhead-width: 0px; }
.w2k-grid__content {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-rowhead-width) var(--grid-columns);
  grid-auto-rows: var(--grid-row-height);
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  align-content: start;
}
.w2k-grid__row { display: contents; }

/* Headings: button-face cells with a 1px raised edge, the selection's headings bold (knowledge). */
.w2k-grid__colhead, .w2k-grid__rowhead, .w2k-grid__corner {
  position: sticky;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 2px;
  background: var(--color-control-face);
  color: var(--sys-btn-text);
  box-shadow: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight);
  white-space: pre;
  text-align: center;
}
.w2k-grid__colhead { top: 0; z-index: 3; padding-left: 3px; padding-right: 3px; text-overflow: clip; }
.w2k-grid__colhead[data-align="left"] { text-align: left; }
.w2k-grid__colhead[data-align="right"] { text-align: right; }
.w2k-grid__rowhead { left: 0; z-index: 2; }
.w2k-grid__corner { top: 0; left: 0; z-index: 4; }
.w2k-grid[data-norowheaders] :is(.w2k-grid__rowhead, .w2k-grid__corner) { visibility: hidden; }
.w2k-grid__colhead[data-sel], .w2k-grid__rowhead[data-sel] { font-weight: 700; }
.w2k-grid__divider { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: var(--cursor-horizontal-resize, col-resize); }
.w2k-grid__colhead:last-of-type > .w2k-grid__divider { right: 0; }

/* Cells: silver grid lines right and below, the text 2px in (numbers right-aligned). */
.w2k-grid__cell {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px 3px 0 2px;
  border-right: 1px solid var(--color-grid-line);
  border-bottom: 1px solid var(--color-grid-line);
  white-space: pre;
}
.w2k-grid__cell[data-align="right"] { text-align: right; }
.w2k-grid__cell[data-align="center"] { text-align: center; }
/* Read-only cells: ButtonFace, as a read-only edit (extension). */
.w2k-grid__cell[data-readonly] { background: var(--color-surface); }
.w2k-grid__cell[data-sel] { background: var(--sys-hilight); color: var(--sys-hilight-text); }
/* The active cell of a selected range: 25% of the accent (user, 2026-10-10: Excel leaves it white — it read as a hole). */
.w2k-grid__cell[data-sel-active] { background: color-mix(in srgb, var(--sys-hilight) 25%, var(--sys-window)); }

/* Check cells: the check box centred (the dialog control's box and Marlett mark). */
.w2k-grid__cell > .w2k-check__box { top: 1px; left: round(down, (100% - var(--metric-checkbox-size)) / 2, 1px); }
.w2k-grid__cell[data-checked] > .w2k-check__box::after { visibility: visible; }
.w2k-grid__cell[data-readonly] > .w2k-check__box { background: var(--color-surface); }

/* The active cell: a 1px WindowText frame on its grid lines. */
.w2k-grid__active {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--sys-window-text);   /* 1px on the cell's grid lines (user's call; Excel draws 2px) */
  pointer-events: none;
}

/* In-place editor: the cell's text position (its padding; js/components/grid.js sizes the bottom one so the text sits
   on the cell's line), no edge of its own (Excel edits in the cell) — under the active frame, which stays. */
.w2k-grid__editor {
  position: absolute;
  z-index: 0;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 2px 3px 0 2px;
  background: var(--sys-window);
  color: var(--sys-window-text);
  font: inherit;
  line-height: var(--line-height-ui);
  outline: none;
  caret-color: var(--sys-window-text);
}
.w2k-grid__editor[data-align="right"] { text-align: right; }
.w2k-grid__editor::selection { background: var(--sys-hilight); color: var(--sys-hilight-text); }

/* List and lookup cells: a combo-box button inside the active cell, at its right (user's call — not Excel's arrow
   beside the cell), over the editor. */
.w2k-grid__drop {
  position: absolute;
  z-index: 2;
  width: calc(var(--metric-scrollbar-size) + 1px);   /* odd: the 7px arrow centred, 3px clear on both sides */
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
}
.w2k-grid__drop::before {
  content: "6";
  position: absolute;
  left: calc(var(--metric-scrollbar-glyph-left) + 1px);
  top: var(--metric-scrollbar-glyph-top);
  font: var(--font-glyph-scroll);
  color: var(--sys-btn-text);
  pointer-events: none;
}
.w2k-grid__drop[data-pressed] { box-shadow: inset 0 0 0 1px var(--sys-btn-shadow); }
.w2k-grid__drop[data-pressed]::before { transform: translate(1px, 1px); }