.job-deletion {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  overflow: hidden;
}

.job-deletion details > summary {
  color: var(--danger);
  cursor: pointer;
  font-weight: 800;
  list-style-position: inside;
  padding: 16px 18px;
}

.job-deletion details[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line));
}

.job-deletion-body,
.job-deletion-preview {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.job-deletion-body > p,
.job-deletion-heading p,
.job-deletion-warning,
.job-deletion-preserved p,
.job-deletion-status {
  margin: 0;
}

.job-deletion-heading span {
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-deletion-heading h3 {
  margin: 4px 0 2px;
}

.job-deletion-warning,
.job-deletion-blockers {
  background: color-mix(in srgb, var(--danger) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: 12px;
  color: color-mix(in srgb, var(--danger) 78%, var(--ink));
  padding: 12px;
}

.job-deletion-counts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.job-deletion-counts > div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
}

.job-deletion-counts dt,
.job-deletion-counts dd {
  margin: 0;
}

.job-deletion-counts dd {
  font-weight: 800;
}

.job-deletion-preserved ul,
.job-deletion-blockers ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.job-deletion .danger-button {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  justify-self: start;
}

.job-deletion .danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.job-deletion-status[data-tone="error"] {
  color: var(--danger);
  font-weight: 700;
}

@media (max-width: 680px) {
  .job-deletion details > summary,
  .job-deletion-body,
  .job-deletion-preview {
    padding: 14px;
  }

  .job-deletion .danger-button {
    justify-self: stretch;
    width: 100%;
  }
}