/* ── Nights ──────────────────────────────────────────────────────────── */

/* A floor on the card, not on the column count: constrain the thing the text
   actually has to fit into, and let the number of columns follow. */
#night-list {
  display: grid;
  gap: var(--space-small);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  /* Every card the same height, not only the ones sharing a row. */
  grid-auto-rows: 1fr;
}
#night-list > li:has(#more-less) {
  padding: 0;
  border: none;
}
#more-less {
  width: 100%;
  height: 100%;
  min-height: 72px;
  border: 1px dashed var(--border);
}
#night-list > li {
  border: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#night-list h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 400;
}
#night-list time {
  font-size: var(--fs-xsmall);
  color: var(--muted);
}
#night-list h2 > b { font-size: var(--fs-medium); }
#night-list > li > data {
  font-size: var(--fs-xlarge);
  font-weight: 700;
}
#night-list small { font-size: var(--fs-xsmall); }
#night-list dl {
  margin: 3px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--faint);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-small);
}
#night-list dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#night-list dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#night-list .ic {
  margin-right: 3px;
  gap: 1px;
}
#night-list .ic::before,
#night-list .ic::after {
  width: 9px;
  height: 9px;
}
#night-list dd {
  margin: 0;
  flex: none;
}
#night-list dd[data-beats] {
  color: var(--critical);
  font-weight: 700;
}
#night-list dl > div[data-rest] {
  color: var(--muted);
  font-style: italic;
}