/* Mission 21.5: task-oriented hierarchy for existing resource configuration forms. */

.resource-configuration-form {
  display: grid;
  gap: var(--space-5);
}

.resource-form-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.resource-form-section + .resource-form-section {
  padding-top: var(--space-5);
  border-top: var(--border-width-default) solid var(--color-line);
}

.resource-form-section > legend {
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.resource-form-section-heading {
  display: grid;
  gap: var(--space-1);
}

.resource-form-section-heading strong {
  font-size: var(--typography-size-section);
  line-height: 1.25;
}

.resource-form-section-heading .muted {
  max-width: 66ch;
  font-size: var(--typography-size-meta);
  font-weight: 400;
}

.resource-form-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.resource-form-section-grid .resource-field-wide {
  grid-column: 1 / -1;
}

.resource-form-section-emphasis {
  padding: var(--space-4);
  border: var(--border-width-default) solid color-mix(in srgb, var(--color-brand) 24%, var(--color-line));
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-brand));
}

.resource-form-section-emphasis + .resource-form-section {
  border-top: 0;
}

.resource-configuration-form .resource-form-advanced {
  margin-top: 0;
}

.resource-form-context {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-brand);
  background: var(--color-canvas);
}

.resource-form-context p {
  margin: 0;
}

@media (min-width: 900px) {
  .resource-configuration-form.resource-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-configuration-form .resource-form-actions,
  .resource-configuration-form .resource-form-advanced {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .resource-form-section-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .resource-form-section-grid .resource-field-wide {
    grid-column: auto;
  }

  .resource-form-section-emphasis {
    padding: var(--space-3);
  }

  .resource-form-section + .resource-form-section {
    padding-top: var(--space-4);
  }
}