/* Excel-like chrome for the sheet preview page's rebuilt grids
   (Components::SheetPreviews::Page over SheetPreviews::TransformsCalcHtml's
   `table.sheet-grid`): grid lines, sticky column letters along the top and
   sticky row numbers down the left. `border-collapse: separate` is what lets a
   table header stick at all.

   Painted with DaisyUI theme tokens rather than a fixed palette, because the
   page renders inside the evidence drawer's iframe under the reader's own
   theme — a hardcoded light grid would stay white on a dark page. The workbook's
   OWN colours (fills, font colours) ride inline on the cells, allowlisted by the
   transform; only the chrome around them is ours.

   Text wraps at word boundaries only: a single word wider than its column is
   clipped, as Excel clips it against a non-empty neighbour, rather than broken
   mid-word. */

.sheet-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-base-content);
}

/* A cell the workbook itself painted is the DOCUMENT'S paper, not ours, so it
   keeps the document's own ink — black, which is Excel's default font colour on
   a fill — rather than the theme's foreground. Without this the theme's
   near-white text in dark mode lands on the workbook's own light fill and the
   row goes unreadable. A cell the workbook gave an explicit font colour carries
   that colour inline on its span and still wins over this. The transform
   (SheetPreviews::TransformsCalcHtml) is the only writer of these styles and
   always emits the property under this exact name, which is what makes the
   attribute match safe. */
.sheet-grid td[style*="background-color"] {
  color: #000;
}

.sheet-grid td {
  border-right: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  padding: 2px 6px;
  vertical-align: bottom;
  white-space: pre-wrap;
  overflow-wrap: normal;
  overflow: hidden;
}

/* The axis headers: column letters and row numbers. */
.sheet-grid th {
  position: sticky;
  background: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  border-right: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  padding: 2px 4px;
  z-index: 1;
}

.sheet-grid thead th {
  top: 0;
  z-index: 2;
}

.sheet-grid tbody th {
  left: 0;
}

/* The corner cell sits above both axes. */
.sheet-grid thead th:first-child {
  left: 0;
  z-index: 3;
}