.code-blocks-side-by-side {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  width: 100%;
}

.code-blocks-side-by-side > .highlight {
  min-width: 0;
  margin: 0;
  position: relative;
}

.code-blocks-side-by-side > .highlight:first-child {
  flex: 9 1 0;
}

.code-blocks-side-by-side > .highlight:last-child {
  flex: 11 1 0;
}

@media (max-width: 768px) {
  .code-blocks-side-by-side {
    flex-direction: column;
    gap: 1rem;
  }
  
  .code-blocks-side-by-side > .highlight {
    flex: none;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    overflow: visible;
  }
  
  .code-blocks-side-by-side > .highlight pre {
    height: auto;
    min-height: auto;
    overflow: visible;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

/* Editable field styles - more distinctive */
.editable-field {
  display: inline-block;
  min-width: 2ch;
  padding: 1px 3px;
  margin: 0 1px;
  border: 1px solid rgba(43, 188, 138, 0.6);
  background: rgba(43, 188, 138, 0.12);
  border-radius: 3px;
  cursor: text;
  outline: none;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 0 0 1px rgba(43, 188, 138, 0.2);
}

.editable-field:hover {
  background: rgba(43, 188, 138, 0.18);
  border-color: rgba(43, 188, 138, 0.9);
  box-shadow: 0 0 0 1px rgba(43, 188, 138, 0.3), 0 0 4px rgba(43, 188, 138, 0.2);
}

.editable-field:focus {
  background: rgba(43, 188, 138, 0.2);
  border-color: rgba(43, 188, 138, 1);
  box-shadow: 0 0 0 2px rgba(43, 188, 138, 0.3), 0 0 6px rgba(43, 188, 138, 0.3);
}

/* Flash animation for synced fields */
@keyframes flash {
  0%, 100% { background: rgba(255, 255, 255, 0.08); }
  50% { background: rgba(100, 200, 255, 0.3); }
}

.field-flash {
  animation: flash 0.3s ease;
}

/* Destination field styles (cosmetic highlighting only, no border) - toned down */
.destination-field {
  display: inline-block;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 1px;
  transition: background 0.2s ease;
}

.destination-field:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Editable fields that are also destination fields (shouldn't happen, but just in case) */
.editable-field.destination-field {
  /* Editable takes precedence - keep the editable styling */
}

/* Editable table cell styles - different from code block style */
.cactus-table-wrapper td.editable-field {
  display: table-cell;
  min-width: 2ch;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border: none !important;
  background: transparent;
  border-radius: 0;
  cursor: text;
  outline: none;
  transition: all 0.2s ease;
  position: relative;
  border-bottom: 2px solid transparent !important;
}

.cactus-table-wrapper td.editable-field:hover {
  background: rgba(43, 188, 138, 0.1);
  border-bottom-color: rgba(43, 188, 138, 0.6) !important;
}

.cactus-table-wrapper td.editable-field:focus {
  background: rgba(43, 188, 138, 0.15);
  border-bottom-color: rgba(43, 188, 138, 1) !important;
  box-shadow: inset 0 -2px 0 rgba(43, 188, 138, 0.3);
}