body {
  font: icon;
}

body>div {
  display: flex;
  gap: 1em;
}

#slotSpan {
  flex: 1;
}

table {
  border: 1px solid gray;
  margin-block: 1em;
  width: 100%;
  user-select: none;
}

caption {
  caption-side: bottom;
  padding: 1em;
}

caption>span {
  border-left: 1em solid;
  color: gray;
  cursor: pointer;
  margin: 1ex;
  outline: 1px solid gray;
  padding-left: 1ex;
}

caption>span.focused {
  color: black;
}

caption>span>time {
  color: silver;
  margin: 1ex;
}

tr:hover {
  background: silver;
}

th {
  width: 0;
}

td {
  border: 1px solid silver;
}

td.selected {
  outline: 1px solid black;
}

/* Note that the `2` in here is to account for the offset caused by the `th` */
td:nth-child(6n + 2) {
  border: 1px solid gray;
}

a {
  text-decoration: none;
}

#slotDiv {
  display: none;
}

#typeDiv:not([data-type]) {
  display: none;
}