/* ---------------------------------------------------------------------------
   diff.css — the before/after of the AI rewrite.
   ---------------------------------------------------------------------------
   This is the one place the operator can check the model's work rather than
   trust it, so it is styled to be READ: generous line height, a comfortable
   measure, and marks that are legible rather than lurid.

   Both marks carry a shape as well as a colour. A deletion is struck through
   and an insertion is underlined, so the diff still parses in greyscale and for
   an operator who cannot separate the two hues.
--------------------------------------------------------------------------- */

.rewrite {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.rewrite__for {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-fg-muted);
}

.diff {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.diff__head {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.diff__title {
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-fg-muted);
}
.diff__stats { gap: var(--s-1); margin-left: auto; }
.diff__stats .chip[hidden] { display: none; }

/* Every child is placed EXPLICITLY. The divider is display:none at this width,
   which removes it as a grid item entirely, and with auto-placement that
   silently shifts the "after" pane one track to the left. Naming the columns
   makes the layout independent of how many children happen to be rendered. */
.diff__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.diff__side { padding: var(--s-3); min-width: 0; }
.diff__side--before { grid-column: 1; border-right: 1px solid var(--c-border); }
.diff__side--after { grid-column: 2; }

.diff__label {
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-fg-faint);
}

.diff__text {
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-fg);
  max-height: 22em;
  overflow-y: auto;
}
.diff__side--before .diff__text { color: var(--c-fg-muted); }

/* Colour AND shape, on both marks. */
.diff__text del {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  border-radius: var(--r-sm);
  padding: 0 2px;
}
.diff__text ins {
  background: var(--c-ok-soft);
  color: var(--c-ok-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: var(--r-sm);
  padding: 0 2px;
}

/* Side by side above 720px, so the divider is redundant and hidden. */
.diff__divider { display: none; }

.diff__note {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--c-border);
  background: var(--c-warn-soft);
  color: var(--c-warn-ink);
  font-size: var(--t-xs);
}
.diff__note[hidden] { display: none; }

/* ---- stacked ------------------------------------------------------------- */
/* Below 720px "left" and "right" stop meaning anything, so the divider appears
   and says which one is which. */
@media (max-width: 720px) {
  .diff__grid { grid-template-columns: minmax(0, 1fr); }
  .diff__side--before,
  .diff__side--after,
  .diff__divider { grid-column: 1; }
  .diff__side--before { border-right: 0; border-bottom: 1px solid var(--c-border); }

  .diff__divider {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-primary-soft);
    border-bottom: 1px solid var(--c-border);
  }
  .diff__divider::before,
  .diff__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-primary);
    opacity: .3;
  }
  .diff__divider-label {
    font-size: var(--t-xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-primary);
  }

  .diff__stats { margin-left: 0; width: 100%; }
  .diff__text { max-height: 16em; }
}