html,
body {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  font-family: sans-serif;
}

#page-header {
  margin: 16px 5px 12px;
}

#page-title {
  font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
  font-size: 2em;
  font-weight: normal;
  margin: 0;
  color: #000;
}

#page-subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #202122;
  margin: 4px 0 0;
}

#label {
  display: flex;
  align-items: start;
  gap: 1em;
  margin: 5px;
  padding: 5px;
  margin-left: 0px;
  background-color: #f5f9ff;
  min-height: 52px;
}

#date-time {
  display: block;
  width: 30%;
  gap: 1em;
}

#nav-arrows {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

#prev-btn,
#next-btn {
  font-size: 14px;
  padding: 2px 8px;
  border: 1px solid #c0cfe0;
  border-radius: 3px;
  background: #ffffff;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

#prev-btn:hover,
#next-btn:hover {
  background: #e0ecff;
}

#editor-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5em;
  row-gap: 0.2em;
  align-items: baseline;
  align-content: start;
  width: 70%;
}

#edit-label,
#comment-label {
  display: contents;
}

.field-label {
  text-align: right;
}

#live-duration {
  font-size: 11px;
  color: #555;
  margin-top: 4px;
}

#jump-block {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}

#jump-input {
  width: 7em;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #c0cfe0;
}

#jump-msg {
  color: #c0392b;
  font-size: 11px;
}

.section-heading {
  font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
  font-size: 1.5em;
  font-weight: normal;
  border-bottom: 1px solid #a2a9b1;
  padding-bottom: 0.25em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #000;
}

.section-subheading {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}

#text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #202122;
}

p{
  margin-top: 0px;
}

.section-removed {
  font-style: italic;
  padding-top: 30px;
}

#timeline-header {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin: 20px 0 2px;
  border-bottom: 1px solid #a2a9b1;
  padding-bottom: 4px;
}

#timeline-label {
  font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
  font-size: 1.1em;
  color: #000;
}

#timeline-range {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #555;
}

#timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#timeline {
  position: relative;
  min-width: 900px;
  margin: 8px 5px 8px 0;
}

.timeline-track {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 3px;
  background: #c0cfe0;
}

.timeline-tick {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: 1px;
  height: 11px;
  background: #a0b4cc;
  pointer-events: none;
}

.timeline-hour-tick {
  position: absolute;
  transform: translateX(-50%);
  width: 1px;
  height: 5px;
  background: #c8d8e8;
  pointer-events: none;
}

.timeline-hour-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: #aaa;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.timeline-day-label {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #555;
  user-select: none;
  pointer-events: none;
}

.timeline-event {
  position: absolute;
  transform: translateX(-50%);
  width: 1.5px;
  background: #b39ddb;
  pointer-events: none;
  z-index: 2;
}

/* up: label space above, line ends at track (top: 12px) */
.timeline-event.up {
  top: -8px;
  height: 27px;
}

/* down: line starts at track, extends below */
.timeline-event.down {
  top: 8px;
  height: 36px;
}

.timeline-event-label {
  position: absolute;
  left: 5px;
  font-size: 10px;
  color: #b39ddb;
  white-space: nowrap;
  line-height: 1;
}

.timeline-event.up .timeline-event-label {
  top: 0;
}

.timeline-event.down .timeline-event-label {
  bottom: -2px;
}

/* keep old names as aliases so nothing else breaks */
.timeline-bomb-label {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 10px;
  color: #b39ddb;
  white-space: nowrap;
}

.timeline-bomb-label-below {
  position: absolute;
  bottom: -2px;
  left: 5px;
  font-size: 10px;
  color: #b39ddb;
  white-space: nowrap;
  line-height: 1;
}

.timeline-dot {
  position: absolute;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(90, 130, 180, 0.5);
  cursor: pointer;
}



.timeline-dot.current {
  background: #b39ddb;
  z-index: 1;
}

#references {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #202122;
}

.references-list {
  margin: 0;
  padding-left: 2.5em;
  list-style: none;
  counter-reset: ref-counter;
  column-count: 2;
  column-gap: 3em;
}

.references-list li {
  position: relative;
  padding-left: 0.25em;
  margin-bottom: 0.3em;
  break-inside: avoid;
}

.references-list li::before {
  content: attr(value) ".";
  position: absolute;
  left: -2.25em;
  color: #202122;
  font-size: 0.85em;
  top: 0.1em;
}

.references-list a {
  color: #0645ad;
  text-decoration: none;
  word-break: break-all;
}

.references-list a:hover {
  text-decoration: underline;
}

.word-add {
  background: #c6efce;
  color: #276221;
  border-radius: 2px;
}

.word-rem {
  background: #ffc7ce;
  color: #9c0006;
  border-radius: 2px;
  text-decoration: line-through;
}

.cite-ref {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
}

.cite-ref a {
  color: #0645ad;
  text-decoration: none;
}

.cite-ref a:hover {
  text-decoration: underline;
}

#mobile-note {
  display: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #777;
  font-style: italic;
  margin: 8px 0 0;
}

#edit-scrubber {
  display: none;
  align-items: center;
  gap: 0.75em;
  margin: 4px 0 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #555;
}

#edit-slider {
  --fill: 0%;
  --track-filled: #d9cdef;
  --track-empty: #d6e3f2;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#edit-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--track-filled) var(--fill),
    var(--track-empty) var(--fill));
}

#edit-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track-empty);
}

#edit-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--track-filled);
}

#edit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #b39ddb;
  border: none;
}

#edit-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b39ddb;
  border: none;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 700px) {
  #edit-scrubber {
    display: flex;
  }

  #mobile-note {
    display: block;
  }

  #page-title {
    font-size: 1.6em;
  }

  /* Editor fields sit beside the date/time while they fit, then wrap below */
  #label {
    flex-wrap: wrap;
    margin-right: 0;
  }

  #date-time {
    width: auto;
    flex: 0 0 auto;
  }

  #editor-block {
    width: auto;
    flex: 1 1 260px;
  }

  #nav-arrows {
    display: none;
  }

  #editor,
  #comment {
    overflow-wrap: anywhere;
  }

  #jump-block {
    display: none;
  }

  .section-heading {
    font-size: 1.3em;
  }

  .references-list {
    column-count: 1;
    padding-left: 2em;
  }
}