/* diff.css: Diff (component 19). Owner: group E (P2.T8). Tokens only, logical properties only. 02 "19. Diff". */
[data-component="diff"] { display: grid; gap: var(--space-3); inline-size: 100%; min-inline-size: 0; color: var(--text); }
[data-component="diff"][data-standalone="true"] .diff__line { border-radius: 0; }
[data-component="diff"][data-standalone="true"] .diff__rows { border-radius: var(--radius-control); overflow: hidden; }

[data-component="diff"] .diff__headers { display: none; font: var(--type-label); color: var(--text-secondary); }
[data-component="diff"][data-layout="columns"] .diff__headers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-inline: var(--space-4); }

[data-component="diff"] .diff__rows { display: grid; gap: var(--space-4); }
[data-component="diff"] .diff__row { display: grid; gap: var(--space-2); }
[data-component="diff"] .diff__label { margin: 0; color: var(--text-secondary); font: var(--type-label); }
[data-component="diff"] .diff__pair { display: grid; gap: var(--space-1); }
[data-component="diff"][data-layout="columns"] .diff__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

[data-component="diff"] .diff__line {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--critical-subtle);
  font: var(--type-table);
  color: var(--text);
}
[data-component="diff"] .diff__line[data-kind="added"] { background: var(--good-subtle); }
[data-component="diff"] .diff__line .icon { align-self: center; color: var(--critical); }
[data-component="diff"] .diff__line[data-kind="added"] .icon { color: var(--good); }
[data-component="diff"] .diff__tag { color: var(--text-secondary); font: var(--type-label); }
/* In columns the headers carry the words; the tags stay for screen readers. */
[data-component="diff"][data-layout="columns"] .diff__tag {
  position: absolute;
  inline-size: var(--border-width);
  block-size: var(--border-width);
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
}
[data-component="diff"] .diff__value { min-inline-size: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
[data-component="diff"] .diff__value[data-empty="true"] { color: var(--text-secondary); }

[data-component="diff"] .diff__toggle {
  justify-self: start;
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--brand);
  font: var(--type-label);
}
[data-component="diff"] .diff__toggle:hover { background: var(--surface-hover); text-decoration: underline; }
[data-component="diff"] .diff__toggle:active { background: var(--border); }
[data-component="diff"] .diff__unchanged { margin: 0; display: grid; gap: var(--space-2); padding-inline: var(--space-4); }
[data-component="diff"] .diff__unchanged[hidden] { display: none; }
[data-component="diff"] .diff__same { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); font: var(--type-caption); }
[data-component="diff"] .diff__same dt { color: var(--text-secondary); }
[data-component="diff"] .diff__same dd { margin: 0; overflow-wrap: anywhere; }
[data-component="diff"][data-layout="columns"] .diff__line { grid-template-columns: auto minmax(0, 1fr); }

/* Kitchen sink sample widths (the demo only). */
.diff-demo { inline-size: var(--size-popover-md); max-inline-size: 100%; min-inline-size: 0; }
.diff-demo[data-width="wide"] { inline-size: var(--size-dialog-lg); }