#date-line-layer { pointer-events: none; display: none; }
#date-line-layer.is-visible { display: inline; }
.date-line-toggle {
  position: absolute;
  top: .65rem;
  left: .65rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 5rem);
  padding: .45rem .6rem;
  border: 1px solid #65858f80;
  border-radius: .35rem;
  background: #081a27e8;
  color: #e0edf0;
  font: 500 .72rem Arial,sans-serif;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}
.date-line-toggle input { margin: 0; accent-color: #f4c978; flex: none; }
.date-skip-moment {
  position: absolute;
  top: 3.45rem;
  left: .65rem;
  z-index: 6;
  box-sizing: border-box;
  width: min(19rem,calc(100% - 5rem));
  padding: .55rem .65rem;
  border: 1px solid #f4c978;
  border-radius: .35rem;
  background: #081a27ed;
  color: #fff1cc;
  font: 500 .8rem/1.4 Arial,sans-serif;
  pointer-events: none;
}
.date-skip-moment[hidden] { display: none; }
.date-skip-moment strong,.date-skip-moment span { display: block; }
.date-skip-moment strong { font-size: .84rem; }
.date-skip-moment #date-skip-utc { color: #d7e8e5; margin-bottom: .25rem; }
#date-skip-dates { display: grid; gap: .15rem; margin: .4rem 0; }
#date-skip-dates>div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; align-items: baseline; }
#date-skip-dates>div+div { border-top: 1px solid #f4c97840; padding-top: .2rem; }
#date-skip-dates span:last-child { text-align: right; white-space: nowrap; }
#date-skip-details { color: #ffe3a3; font-size: .78rem; font-weight: 700; }
#date-skip-vanished { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; color: #ffe3a3; font-size: .74rem; }
#date-skip-vanished del { text-decoration-thickness: 2px; text-decoration-color: #f4c978; }
#date-line-layer .date-line-casing {
  fill: none;
  stroke: #08202b;
  stroke-width: 5;
  stroke-linejoin: round;
}
#date-line-layer .date-line-stroke {
  fill: none;
  stroke: #f4c978;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
}
#date-line-layer .date-line-label {
  fill: #fff1cc;
  font: 600 11px Arial,sans-serif;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #08202b;
  stroke-width: 3px;
  stroke-linejoin: round;
}