/* Hovered row and column. The row rule matches the `tr` the script marks, and
 * keeps the specificity of the column rule: one notch higher, it would outrank
 * the rule of the hovered cell below. */
table td.crosshair-col,
table th.crosshair-col,
tr.crosshair-row > td,
tr.crosshair-row > th {
  background-color: var(--color-background-hover, rgba(128, 128, 128, 0.12));
}

/* The hovered cell, outlined to mark the intersection. */
table td.crosshair-cell,
table th.crosshair-cell {
  background-color: var(--color-highlight-on-target, rgba(255, 209, 0, 0.4));
  outline: 2px solid var(--color-brand-primary, #336790);
  outline-offset: -2px;
}

/* A cell whose whole content is one link: the link's hit area covers the
 * cell. The link itself is untouched, so keyboard focus and middle-click keep
 * working, and the overlay is transparent, so the highlight shows through. */
table td.linked-cell,
table th.linked-cell {
  position: relative;
  cursor: pointer;
}
table td.linked-cell a[href]::after,
table th.linked-cell a[href]::after {
  content: "";
  position: absolute;
  inset: 0;
}