/* Jarbou3i commit and revision history dialogs (UIX-4, ADR-0002): the exact
   diff, its approval and the immutable revisions. Classes are .j-commit-*,
   .j-diff-* and .j-rev-*; the shell, trust line, section heads, actions and
   revision list are dialog.css, the buttons, fields and chips kernel controls. */

/* Inside the dialog panel, so it takes the panel's colour. */
.j-commit { display: grid; gap: var(--j-s-3); margin-top: var(--j-s-3); background: transparent; }

/* Base, source, validation and integrity: label above value. */
.j-commit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--j-s-2); margin: 0; }
.j-commit-facts > div { min-width: 0; padding: var(--j-s-2) var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2); }
.j-commit-facts dt { color: var(--j-fg-muted); font-size: var(--j-t-12); }
.j-commit-facts dd { margin: var(--j-s-1) 0 0; color: var(--j-fg); font-weight: 600; overflow-wrap: anywhere; }

/* Not scroll boxes of their own: they have nothing to focus, so a keyboard
   could not scroll them. The dialog scrolls instead. */
.j-diff { display: grid; gap: var(--j-s-2); margin: 0; padding: 0; list-style: none; }
.j-diff-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--j-s-2) var(--j-s-3);
  padding: var(--j-s-3); border: 1px solid var(--j-line); border-radius: var(--j-r-2);
}
.j-diff-path { min-width: 0; overflow-wrap: anywhere; color: var(--j-fg); font-size: var(--j-t-13); }
.j-diff-vals { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--j-s-2); }
.j-diff-val { min-width: 0; color: var(--j-fg-muted); font-size: var(--j-t-12); }
.j-diff-val pre {
  margin: var(--j-s-1) 0 0; padding: var(--j-s-2); border: 1px solid var(--j-line); border-radius: var(--j-r-1);
  background: var(--j-raise); color: var(--j-fg); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font-size: var(--j-t-12);
}
.j-diff-val:first-child pre { border-color: color-mix(in srgb, var(--j-crit) 55%, transparent); }
.j-diff-val:last-child pre { border-color: color-mix(in srgb, var(--j-ok) 55%, transparent); }

/* Who approves, why, and the explicit confirmation. */
.j-commit-approve { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); gap: var(--j-s-3); align-items: start; }
.j-commit-confirm { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--j-s-2); min-height: 44px; padding-block: var(--j-s-2); color: var(--j-fg); cursor: pointer; }
.j-commit-confirm input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--j-signal); }

/* Revisions beside the comparison with the current head. */
.j-rev-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: var(--j-s-4); align-items: start; }
.j-rev-list, .j-rev-compare { display: grid; gap: var(--j-s-2); align-content: start; min-width: 0; }

@media (max-width: 720px) {
  .j-commit-approve, .j-diff-vals, .j-rev-grid { grid-template-columns: 1fr; }
}