/* Geometry mirrors CodeBlock/TerminalBlock (12px radius, code-block surface +
   banner row, markdown code-block font) so a diff card reads as one family with
   a fenced block and a terminal card. The deliberate divergence, shared with
   TerminalBlock: the body keeps `white-space: pre` and scrolls horizontally,
   because folding a source line destroys the indentation a diff is read by. */

.block {
  --dsl-diff-radius: 12px;
  --dsl-diff-line-height: 22px;

  position: relative;
  margin: 16px 0;
  color: var(--dsw-alias-label-primary);
  background: var(--dsw-alias-markdown-code-block);
  border-radius: var(--dsl-diff-radius);
}

/* The copy control floats in the top-right corner over the body, so the card
   has no empty banner row above its first diff line (the TUI diff card has no
   banner either — only the footer). The block is position: relative, so this
   anchors to the card. */
.copyButton {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 1;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--dsw-alias-label-secondary);
  cursor: pointer;
  font: var(--dsw-font-xs-13);
}

.body {
  padding: 12px 14px;
  font: var(--dsw-font-markdown-code-block);
  overflow-x: auto;
  overflow-y: hidden;
}

/* No wrapping, no word-break: a diff is read by its indentation. */
.line {
  min-height: var(--dsl-diff-line-height);
  white-space: pre;
}

/* A file header: the path in the primary tone, set apart by weight. The copy
   button floats over this first row's top-right corner, so reserve space at the
   line's end for it — a long path scrolls under the button otherwise, and the
   button's hit area would eat clicks on the path's tail. */
.path {
  color: var(--dsw-alias-label-primary);
  font-weight: 600;
  padding-right: 56px;
}

/* A same-file second hunk's separator (a scattered edit), in the dim tone. */
.gap {
  color: var(--dsw-alias-label-tertiary);
}

/* The diff's own meaning-carrying colors: removed on the error token, added on
   the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
   shown line agree, and so the sign reads without relying on color alone. */
.del::before {
  content: '- ';
  color: var(--dsw-alias-state-error-primary);
}

.del {
  color: var(--dsw-alias-state-error-primary);
}

.add::before {
  content: '+ ';
  color: var(--dsw-alias-state-success-primary);
}

.add {
  color: var(--dsw-alias-state-success-primary);
}

.expand {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.expand:hover {
  color: var(--dsw-alias-label-secondary);
}

/* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
   footer the TUI transcript's diff card draws. */
.footer {
  padding: 0 14px 12px;
  font: var(--dsw-font-markdown-code-block);
  color: var(--dsw-alias-label-tertiary);
}