/**
 * S6 — Edit credential + delete confirmation layout.
 *
 * Single form card inside a page container. Reuses the shared card, label,
 * input, select, button, callout, and modal primitives from
 * public/components/. This stylesheet only owns the edit-specific structure:
 * the rotate section separator, the read-only environment row, and the
 * split footer (delete-link on the left, cancel + save on the right).
 *
 * Destructive-warning panel inside the delete modal is a plain
 * `c-callout--danger` with a numbered list inside.
 */

.edit-page {
  padding-top: var(--space-5);
  padding-bottom: var(--space-9);
}

.edit-title {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-h1);
  font-weight: 500;
  color: var(--text-primary);
}

.edit-field {
  margin-bottom: var(--space-4);
}

.edit-env-readonly {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-sm) var(--space-3);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  max-width: 28rem;
}

.edit-env-readonly__value {
  color: var(--text-primary);
  font-weight: 500;
}

/* The rotate sub-section is visually separated from the label row to make
   it clear the three fields operate as a unit and are optional. */
.edit-rotate {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 0.5px solid var(--border-tertiary);
}

.edit-rotate__help {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  line-height: var(--line-height-body);
}

/* Split footer: delete link left, cancel + save right. Stacks on mobile. */
.edit-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 0.5px solid var(--border-tertiary);
}

.edit-footer__delete {
  /* Ghost-danger link style: no fill, no border, danger-red text. */
  background: transparent;
  color: var(--danger-text);
  border-color: transparent;
}

.edit-footer__delete:hover:not(:disabled) {
  background: var(--danger-bg);
}

.edit-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edit-submit-err {
  display: block;
  margin-top: var(--space-2);
  color: var(--danger-text);
  font-size: var(--font-size-small);
}

@media (min-width: 640px) {
  .edit-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .edit-footer__actions {
    justify-content: flex-end;
  }
}

/* Destructive "what you'll need to do" panel inside the delete modal. */
.edit-del-steps {
  margin: 0;
  padding-inline-start: var(--space-5);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.edit-del-steps li + li {
  margin-top: var(--space-1);
}