/*
 * Change history timeline (components/change-history.js). A rail of markers,
 * one per event, newest on top; a field change is a row "поле  старе → нове"
 * inside a hairline table, a comment a quote. It replaces a bordered card per
 * history row, which turned ten saves into a wall of identical boxes.
 */
.change-history {
  display: grid;
  min-width: 0;
  gap: var(--fs-space-2);
}

.change-history__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-history__icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--change-history-icon) center / contain no-repeat;
  mask: var(--change-history-icon) center / contain no-repeat;
}

.change-history__icon--created { --change-history-icon: url("/stoneware/icons/task/sparkle.svg"); }
.change-history__icon--changed { --change-history-icon: url("/stoneware/icons/task-actions/edit.svg"); }
.change-history__icon--comment { --change-history-icon: url("/stoneware/icons/task/comment.svg"); }
.change-history__icon--arrow { --change-history-icon: url("/stoneware/icons/task-actions/arrow-right.svg"); }
.change-history__icon--history { --change-history-icon: url("/stoneware/icons/task/history.svg"); }
.change-history__icon--chevron { --change-history-icon: url("/stoneware/icons/chevron.svg"); }

.change-history__event {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
}

/* The rail runs from one marker to the next and stops at the last event of a list. */
.change-history__event::before {
  position: absolute;
  top: 30px;
  bottom: 2px;
  left: 13.5px;
  width: 1px;
  background: var(--fs-color-border);
  content: "";
}

.change-history > .change-history__list:only-child > .change-history__event:last-child,
.change-history__more .change-history__event:last-child {
  padding-bottom: 0;
}

.change-history > .change-history__list:only-child > .change-history__event:last-child::before,
.change-history__more .change-history__event:last-child::before {
  content: none;
}

.change-history__marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--fs-color-surface);
}

.change-history__event--created .change-history__marker {
  color: var(--fs-color-success-text);
  background: var(--fs-color-success-subtle);
}

.change-history__event--comment .change-history__marker {
  color: var(--fs-color-warning-text);
  background: var(--fs-color-warning-subtle);
}

.change-history__content {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.change-history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.change-history__action {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

.change-history__action strong {
  color: var(--fs-color-text);
  font-weight: 600;
}

.change-history__time {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.change-history__changes {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--fs-color-border-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.change-history__change {
  display: grid;
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 7px 10px;
  background: var(--fs-color-surface);
  font-size: var(--fs-text-sm);
}

.change-history__field {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 500;
}

.change-history__values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.change-history__values .change-history__icon {
  width: 12px;
  height: 12px;
  color: var(--fs-color-text-muted);
}

.change-history__from {
  color: var(--fs-color-text-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--fs-color-text-muted) 60%, transparent);
  overflow-wrap: anywhere;
}

.change-history__to {
  color: var(--fs-color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.change-history__from.is-empty,
.change-history__to.is-empty {
  font-style: italic;
  font-weight: 400;
  text-decoration: none;
}

.change-history__quote {
  margin: 0;
  padding: 7px 10px;
  color: var(--fs-color-text);
  background: var(--fs-color-surface-subtle);
  border-left: 2px solid var(--fs-color-warning-line);
  border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
  font-size: var(--fs-text-sm);
  overflow-wrap: anywhere;
}

/* "Показати ще" sits under the events it reveals, open or closed. */
.change-history__more {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--fs-space-2);
}

.change-history__more-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-left: 40px;
  padding: 4px 10px;
  color: var(--fs-color-primary-text);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.change-history__more-toggle::-webkit-details-marker {
  display: none;
}

.change-history__more-toggle:hover {
  background: var(--fs-color-primary-subtle);
}

.change-history__more-toggle .change-history__icon {
  transition: transform 0.15s ease;
}

.change-history__more[open] .change-history__icon--chevron {
  transform: rotate(180deg);
}

.change-history__more-close,
.change-history__more[open] .change-history__more-open {
  display: none;
}

.change-history__more[open] .change-history__more-close {
  display: inline;
}

.change-history--empty {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}

@media (max-width: 600px) {
  .change-history__change {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}