.record-editor {
  display: grid;
  gap: var(--space-xl);
  inline-size: 100%;
}

.record-editor__entries {
  display: grid;
  gap: var(--space-lg);
}

.record-editor__entry {
  min-inline-size: 0;
}

.record-editor__summary,
.record-editor__form {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.record-editor__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-block-size: 6.875rem;
  padding: var(--space-xl);
}

.record-editor__summary-actions {
  display: flex;
  flex: none;
  gap: var(--space-xs);
}

.record-editor__form {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

.record-editor__summary[hidden],
.record-editor__form[hidden],
.record-editor__entry[hidden] {
  display: none;
}

.record-editor__form-title {
  color: var(--color-neutral-1000);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.record-editor__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}

.record-editor__add {
  justify-self: start;
}

.record-editor__add[hidden] {
  display: none;
}

@media (max-width: 46rem) {
  .record-editor__summary,
  .record-editor__form {
    padding: var(--space-lg);
  }
}

@media (max-width: 28rem) {
  .record-editor__summary {
    padding-inline: var(--space-md);
  }
}