.surface-hidden,
.diff-workspace.surface-hidden {
  display: none;
}

.diff-workspace {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}

[data-appearance="light"] .diff-workspace {
  background: var(--color-surface);
}

.diff-toolbar,
.diff-invalid,
.diff-footer,
.diff-document-select,
.diff-segment {
  display: flex;
  align-items: center;
}

.diff-toolbar {
  min-height: var(--toolbar-height);
  flex: none;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-pane-inline);
  overflow-x: auto;
  border-bottom: var(--space-border) solid var(--color-divider);
}

.diff-result-heading,
.diff-result-counts,
.diff-result-controls,
.diff-change-navigation,
.diff-view-mode,
.diff-toggle-button {
  display: inline-flex;
  align-items: center;
}

.diff-result-heading {
  flex: none;
  gap: var(--space-2);
  color: var(--color-neutral-300);
  font-size: var(--font-size-label);
  letter-spacing: var(--tracking-label);
}

.diff-toolbar-separator {
  flex: none;
  width: var(--space-border);
  height: var(--toolbar-divider-height);
  background: var(--color-divider);
}

.diff-result-counts {
  flex: none;
  gap: var(--space-2);
}

.diff-stat-chip {
  min-height: 22px;
  padding: 0 var(--space-3);
  border: var(--space-border) solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-emphasis);
  line-height: 22px;
  white-space: nowrap;
}

.diff-stat-dot {
  inline-size: var(--dot-size);
  block-size: var(--dot-size);
  border-radius: 999px;
  background: currentColor;
}

.diff-stat-added {
  color: var(--color-positive);
  background: color-mix(in srgb, var(--color-positive) 9%, transparent);
}

.diff-stat-removed {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 9%, transparent);
}

.diff-stat-changed {
  color: #d9a441;
  background: rgb(217 164 65 / 9%);
}

.diff-stat-identical {
  color: var(--color-neutral-400);
  background: color-mix(in srgb, var(--color-neutral-400) 8%, transparent);
}

.diff-result-controls {
  flex: none;
  gap: var(--space-2);
}

.diff-view-mode {
  gap: var(--space-2);
}

.diff-control-button,
.diff-toggle-button {
  min-height: var(--control-height);
  gap: var(--space-2);
  border: var(--space-border) solid var(--color-divider);
  border-radius: var(--radius-control);
  color: var(--color-neutral-300);
  background: var(--color-surface-raised);
  font-size: var(--font-size-control);
}

.diff-control-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-control-block) var(--space-control-inline);
  cursor: pointer;
}

.diff-control-button:focus-within {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: 2px;
}

.diff-control-button:has(input:checked),
.diff-toggle-button:has(input:checked) {
  border-color: var(--color-brand-purple);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.diff-control-button input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.diff-control-button i,
.diff-control-button span {
  pointer-events: none;
}

.diff-toggle-button {
  position: relative;
  padding: 0 var(--space-control-inline);
  cursor: pointer;
}

.diff-toggle-button input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.diff-toggle-button i,
.diff-toggle-button span {
  pointer-events: none;
}

.diff-change-navigation {
  flex: none;
  gap: var(--space-2);
}

.diff-change-indicator {
  min-width: 4.5rem;
  color: var(--color-neutral-500);
  font-size: var(--font-size-control);
  text-align: center;
}

.diff-document-select {
  flex: none;
  gap: var(--space-2);
  color: var(--color-neutral-500);
  font-size: var(--font-size-control);
}

.diff-document-select select {
  min-height: var(--control-height);
  padding: var(--space-control-block) var(--space-control-inline);
  border: var(--space-border) solid var(--color-divider);
  border-radius: var(--radius-control);
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.diff-direction {
  flex: none;
  color: var(--color-neutral-600);
}

.diff-toolbar-spacer {
  min-width: var(--space-3);
  margin-left: auto;
}

.diff-segment {
  flex: none;
  padding: var(--space-border);
  border-radius: var(--radius-md);
  background: var(--color-divider-soft);
}

.diff-segment button,
.diff-collapse button,
.diff-invalid button {
  min-height: var(--control-height);
  padding: var(--space-control-block) var(--space-control-inline);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-neutral-500);
  background: transparent;
  font-size: var(--font-size-control);
  cursor: pointer;
}

.diff-segment button[aria-pressed="true"] {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.diff-segment button:disabled {
  color: var(--color-neutral-700);
  cursor: default;
}

.diff-options {
  display: none;
}

.diff-normalize {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-neutral-300);
}

.diff-normalize input {
  accent-color: var(--color-accent);
}

.diff-explanation {
  color: var(--color-neutral-600);
}

.diff-invalid {
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-pane-inline);
  border-bottom: var(--space-border) solid var(--color-divider);
  color: var(--color-error);
  font-size: var(--font-size-control);
}

.diff-invalid button {
  color: var(--color-error);
  text-decoration: underline;
}

.diff-message {
  min-height: 0;
  flex: 1;
  display: grid;
  place-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-neutral-500);
  text-align: center;
}

.diff-empty i {
  color: var(--color-positive);
  font-size: var(--space-6);
}

.diff-empty strong {
  color: var(--color-text);
}

.diff-entry {
  align-self: center;
  margin-left: auto;
}

.compare-pane-grid {
  grid-template-columns:
    minmax(var(--pane-min-width), 1fr)
    minmax(108px, 140px)
    minmax(var(--pane-min-width), 1fr);
}

.compare-center-controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border-right: var(--space-border) solid var(--color-divider);
  background: var(--color-bg);
}

.compare-submit-button {
  display: inline-grid;
  justify-items: center;
  gap: var(--space-2);
  border: 0;
  color: var(--color-accent);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-emphasis);
  letter-spacing: var(--tracking-label);
}

.compare-submit-circle {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent-soft);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.compare-submit-circle i {
  font-size: 22px;
}

.compare-submit-button:disabled {
  color: var(--color-neutral-700);
  cursor: default;
}

.compare-submit-button:disabled .compare-submit-circle {
  border-color: var(--color-neutral-700);
  background: var(--color-divider-soft);
  box-shadow: none;
}

.compare-submit-label {
  line-height: 1;
}

.compare-disabled-reason {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-label);
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

.compare-operand-pane .editor-stack {
  min-height: 0;
  flex: 1;
}

.compare-editor-host {
  min-height: 0;
  flex: 1;
}

@media (max-width: 920px) {
  .diff-toolbar {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  .diff-toolbar-spacer {
    display: none;
  }

  .compare-pane-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(42vh, 1fr) auto minmax(42vh, 1fr);
    overflow-y: auto;
  }

  .compare-pane-grid > .compare-operand-pane:first-child {
    grid-row: 1;
  }

  .compare-center-controls {
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right: 0;
    border-bottom: var(--space-border) solid var(--color-divider);
  }

  .compare-pane-grid > .compare-operand-pane:last-child {
    grid-row: 3;
  }

  .compare-submit-button {
    width: auto;
  }

  .compare-disabled-reason {
    max-width: 18rem;
    text-align: start;
  }

  .compare-operand-pane {
    min-height: 42vh;
    border-bottom: var(--space-border) solid var(--color-divider);
  }
}

@media (max-width: 680px) {
  .diff-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow-x: hidden;
  }

  .diff-result-heading,
  .diff-result-counts,
  .diff-result-controls {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .diff-result-heading {
    white-space: nowrap;
  }

  .diff-result-counts {
    flex-wrap: wrap;
  }

  .diff-result-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diff-result-controls > * {
    min-width: 0;
  }

  .diff-view-mode {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diff-view-mode .diff-control-button {
    justify-content: center;
  }

  .diff-changes-only {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .diff-control-button,
  .diff-toggle-button {
    white-space: nowrap;
  }

  .diff-toolbar-separator {
    display: none;
  }

  .diff-change-navigation {
    grid-column: 1;
    justify-self: start;
  }

  .diff-edit-documents {
    grid-column: 2;
    justify-self: end;
  }

  .diff-document-select {
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
  }

  .diff-document-select select {
    width: 100%;
  }

  .diff-toolbar-spacer {
    display: none;
  }

  .diff-segment {
    flex: 1;
  }

  .diff-segment button {
    flex: 1;
  }

  .diff-options {
    flex-wrap: wrap;
  }

  .compare-center-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .diff-explanation {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .diff-toolbar {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .diff-stat-chip {
    padding-inline: var(--space-2);
  }

  .diff-control-button,
  .diff-toggle-button {
    padding-inline: var(--space-2);
  }
}