/* JSON Diff: styles for this page only, on top of text-diff-checker.css (the diff rows, counts and hunks) and encoders.css.
   Added, removed and changed use the success, danger and warning tokens as a tint, and every row also carries a
   + , - or ~ marker, so colour is never the only signal. */

.td-panes .enc-pane-head .td-heads-stat {
  margin-left: auto;
}
.jd-head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.jd-upload {
  cursor: pointer;
}
.jd-upload:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.jd-err {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-right: var(--space-4);
}
.jd-count-chg {
  color: var(--color-warning);
}
.jd-capnote {
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

/* Changes view: one row per difference */
.jd-list {
  list-style: none;
  padding: 0;
}
.jd-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  border-bottom: 1px solid var(--color-border);
  scroll-margin: var(--space-2);
}
.jd-item:last-child {
  border-bottom: 0;
}
.jd-item.is-current {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.jd-k-add {
  background: color-mix(in srgb, var(--color-success) 11%, var(--color-surface));
}
.jd-k-del {
  background: color-mix(in srgb, var(--color-danger) 11%, var(--color-surface));
}
.jd-k-chg,
.jd-k-type,
.jd-k-order {
  background: color-mix(in srgb, var(--color-warning) 11%, var(--color-surface));
}
.jd-sign {
  padding-top: var(--space-2);
}
.jd-k-add .jd-sign {
  box-shadow: inset 3px 0 0 var(--color-success);
}
.jd-k-del .jd-sign {
  box-shadow: inset 3px 0 0 var(--color-danger);
}
.jd-k-chg .jd-sign,
.jd-k-type .jd-sign,
.jd-k-order .jd-sign {
  box-shadow: inset 3px 0 0 var(--color-warning);
}
.jd-body {
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.jd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.jd-path {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}
.jd-badge {
  font-family: var(--font);
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.jd-b-add {
  color: var(--color-success);
}
.jd-b-del {
  color: var(--color-danger);
}
.jd-b-chg,
.jd-b-type,
.jd-b-order {
  color: var(--color-warning);
}
.jd-vals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}
.jd-old,
.jd-new {
  padding: 0 var(--space-1);
  border-radius: 2px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.jd-old {
  background: color-mix(in srgb, var(--color-danger) 28%, var(--color-surface));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.jd-new {
  background: color-mix(in srgb, var(--color-success) 28%, var(--color-surface));
}
.jd-arrow {
  color: var(--color-muted);
}
.jd-type {
  font-family: var(--font);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 720px) {
  .jd-err {
    margin-right: 0;
  }
}