/* Field-by-field diff of a structured change (app/views/shared/_field_diff.html.erb):
   a subprocessor entry, AI facts, DPA terms or a certification, before and after.
   Plain CSS rather than Tailwind for the reason text_diff.css gives: the same
   partial renders inside Administrate. The colours are the app's theme tokens
   (app/assets/tailwind/application.css), so the diff follows the light and dark
   themes; Administrate has none of them and gets the fallbacks, GitHub's light
   diff palette. Red is the old side and green the new one, as in any diff. */

.field-diff {
  --field-diff-label: var(--color-white, #1f2328);
  --field-diff-text: var(--color-zinc-300, #1f2328);
  --field-diff-muted: var(--color-zinc-500, #59636e);
  --field-diff-rule: var(--hairline, #d1d9e0);
  --field-diff-ring: var(--hairline-2, #d1d9e0);
  --field-diff-added-fg: var(--color-emerald-400, #1a7f37);
  --field-diff-removed-fg: var(--color-red-400, #d1242f);
  --field-diff-added: color-mix(in oklab, var(--color-emerald-500, #2da44e) 12%, transparent);
  --field-diff-added-word: color-mix(in oklab, var(--color-emerald-500, #2da44e) 30%, transparent);
  --field-diff-removed: color-mix(in oklab, var(--color-red-500, #cf222e) 9%, transparent);
  --field-diff-removed-word: color-mix(in oklab, var(--color-red-500, #cf222e) 24%, transparent);

  container: field-diff / inline-size;
  overflow-x: auto;
  font-size: 14px;
  line-height: 21px;
  font-variant-numeric: tabular-nums;
}

/* Fixed layout, so Before and After split the width evenly, whatever the
   length of either side. */
.field-diff__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

.field-diff__col-label { width: 11rem; }

/* Administrate styles bare rows and cells (a rule under each row, smaller
   cell text); the diff draws its own. */
.field-diff__table tr { border: 0; }

.field-diff__table th,
.field-diff__table td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--field-diff-rule);
  font-size: inherit;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.field-diff__table tr > :first-child { padding-left: 0; }
.field-diff__table tbody tr:last-child > * { border-bottom: 0; }

.field-diff__table thead th {
  padding-top: 0;
  padding-bottom: 8px;
  color: var(--field-diff-muted);
  font-size: 12px;
  font-weight: 500;
}
.field-diff__table thead th.is-added { color: var(--field-diff-added-fg); }
.field-diff__table thead th.is-removed { color: var(--field-diff-removed-fg); }

.field-diff__table tbody th {
  color: var(--field-diff-label);
  font-weight: 500;
}

.field-diff__cell { color: var(--field-diff-text); }
.field-diff__cell.is-removed { background: var(--field-diff-removed); }
.field-diff__cell.is-added { background: var(--field-diff-added); }
.is-changed > .field-diff__cell + .field-diff__cell { border-left: 1px solid var(--field-diff-rule); }

/* An unchanged field recedes, so the changed ones read first. */
.field-diff__table .is-unchanged > th,
.field-diff__table .is-unchanged > .field-diff__cell { color: var(--field-diff-muted); }
.field-diff__table .is-unchanged > th { font-weight: 400; }

.field-diff__same {
  float: right;
  margin-left: 12px;
  font-size: 12px;
}

.field-diff__blank { color: var(--field-diff-muted); }

.field-diff__word {
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
}
ins.field-diff__word { background: var(--field-diff-added-word); }
del.field-diff__word { background: var(--field-diff-removed-word); }

.field-diff__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items sit in untinted cells, so a changed one takes the cell tint and a
   ring of its colour; a kept one just the ring. */
.field-diff__item {
  padding: 0 8px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--field-diff-ring);
}
.field-diff__item.is-added {
  background: var(--field-diff-added);
  box-shadow: inset 0 0 0 1px var(--field-diff-added-word);
}
.field-diff__item.is-removed {
  background: var(--field-diff-removed);
  box-shadow: inset 0 0 0 1px var(--field-diff-removed-word);
}
.field-diff__item > ins,
.field-diff__item > del {
  color: inherit;
  text-decoration: none;
}

/* A narrow diff (the change page on a laptop, beside the review panel, or on
   a phone): each field's name goes above its two sides, which then share the
   whole width. The rows become grids, hence the ARIA roles in the partial. */
@container field-diff (width < 36rem) {
  .field-diff__table,
  .field-diff__table thead,
  .field-diff__table tbody { display: block; }
  .field-diff__table colgroup { display: none; }
  .field-diff__table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-diff__table tr > th:first-child {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 0;
  }
  .field-diff__table thead th:first-child:empty { display: none; }
  .field-diff__table td:only-of-type { grid-column: 1 / -1; }
}