data-table tr:target,
tr.dt-target {
  background: Mark;
  color: MarkText;
}
.dt-fixed th,
.dt-fixed td {
  text-align: left;
  vertical-align: top;
}
.dt-fixed th {
  white-space: nowrap;
}

.dt-box {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 16px);
  border: 1px outset GrayText;
}
.dt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0.5em;
  align-items: center;
  padding: 2px;
}

.dt-controls > input {
  flex: 3 1 12rem;
  min-width: 0;
}
.dt-controls > label {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: 0.25em;
  align-items: center;
}

.dt-controls > label > select {
  flex: 1;
  width: 0;
  min-width: 6rem;
}
.dt-count {
  flex: 0 0 auto;
}
.dt-controls > label,
.dt-count {
  font-size: 0.85em;
  color: GrayText;
}

.dt-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1em;
  padding: 2px;
  font-size: 0.85em;
}
.dt-bar > nav {
  display: flex;
  gap: 1rem;
}
.dt-bar > p {
  margin: 0;
  color: GrayText;
}
.dt-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.dt-scroll:focus-visible {
  outline-offset: -2px;
}
table.dt-fixed {
  table-layout: fixed;
}
.dt-fixed td {
  overflow-wrap: anywhere;
}

.dt-scroll > table.dt-fixed {
  border: 0;
  border-spacing: 0;
}
.dt-fixed th,
.dt-fixed td {
  border: 1px solid Canvas;
  box-shadow:
    inset 1px 1px 0 GrayText,
    inset -1px -1px 0 color-mix(in srgb, GrayText 40%, Canvas);
}
.dt-fixed th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: Canvas;
}
.dt-sort {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 1px 1em 1px 1px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-sort:focus-visible {
  outline: auto;
  outline-offset: -2px;
}
th[aria-sort="ascending"] .dt-sort::after {
  content: " ↑";
}
th[aria-sort="descending"] .dt-sort::after {
  content: " ↓";
}
.dt-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.dt-resize:hover,
.dt-resize:focus-visible {
  background: Highlight;
  outline: none;
}
.dt-spacer td {
  padding: 0;
  border: 0;
}

.dt-type {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.25em;
  vertical-align: -0.1em;
  fill: none;
  stroke: GrayText;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-type circle[r=".75"] {
  fill: GrayText;
}

.dt-value {
  all: unset;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.dt-value:hover {
  text-decoration: underline;
}
.dt-value:focus-visible {
  outline: auto;
}
.dt-value[aria-pressed="true"] {
  background: Mark;
  color: MarkText;
}