.batch-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* A subject's units, in the four states the batch screen distinguishes.
   The left rail carries the state: weight and colour say where teaching has
   got to, reading down the list. */

.unit {
  border-left: 4px solid var(--bs-border-color);
}

/* Being taught now. The only unit that may take new lectures, so it is the
   one thing on the card that should catch the eye. */
.unit-current {
  border-left-color: var(--bs-success);
  background: var(--bs-success-bg-subtle);
  border-radius: 0 0.25rem 0.25rem 0;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Finished. Receded rather than hidden - it is history you may still want to
   read, but not something to act on. */
.unit-done {
  border-left-color: var(--bs-secondary-border-subtle);
  opacity: 0.6;
}

.unit-done strong {
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: var(--bs-secondary-color);
  text-decoration-thickness: 1px;
}

/* Part taught, then left behind. Not an error, but the one state that wants
   somebody to look at it. */
.unit-started {
  border-left-color: var(--bs-warning);
}

/* Not begun. Present at full legibility - it is what comes next - but with a
   plain rail, so it does not compete with the unit being taught. */
.unit-upcoming {
  border-left-style: dashed;
  border-left-color: var(--bs-border-color);
}

.unit-upcoming strong {
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.topic-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.topic-list li {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.topic-list li:last-child {
  border-bottom: 0;
}

.topic-list .seq {
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
  min-width: 2ch;
}

.topic-list li[draggable="true"] {
  cursor: grab;
}

.topic-list li.dragging {
  opacity: 0.4;
}

.step-timeline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.numeric {
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
}